Vue3 组件通信方式【最好用的都在这里了】
目录
一、props方式
二、emit方式
三、v-model方式
一、props方式
props方式是Vue中 父传子 最常见的一种方式了,demo如下:
<!-- 父组件内容 -->
<template><!-- 子组件 --><Footer :clearAll="clearAll"></Footer>
</template><script setup lang="ts">
import Footer from "../components/Footer.vue";
import { reactive } from "vue";const state = reative({todos: []
})const clearAll = () => {state.todos = state.todos.filter(todo => !todo.isCompleted)
}
</script>
<!-- 子组件内容 -->
<template><div><button @click="clearAll">清除已完成任务</button></div>
</template><script setup lang="ts">
import { defineProps } from "vue";const props = defineProps({clearAll: {type: Function,required: true //必传项}
})
</script>
父组件中定义了一个 clearAll 的方法,子组件通过props接收,直接在 button 组件中使用。
二、emit方式
emit方式是Vue中 子传父 最常见的一种方式了,demo如下:
<!-- 子组件内容 -->
<template><div><button @click="clearAll">清除已完成任务</button></div>
</template><script setup lang="ts">
import { defineEmits } from "vue";const emits = defineEmits(['clear'])const clearAll = () => {emits('clear', '清除已完成数据')
}
</script>
<!-- 父组件内容 -->
<template><!-- 子组件 --><Footer @clear="clearAll"></Footer>
</template><script setup lang="ts">
import Footer from "../components/Footer.vue";
import { reactive } from "vue";const state = reative({todos: []
})const clearAll = (value: string) => {state.todos = state.todos.filter(todo => !todo.isCompleted) console.log(value) //清除已完成事件
}
</script>
子组件向父组件发射一个 clear 事件,父组件通过 @clear 来接收。
三、v-model方式
本文的重点来了!v-mode是Vue中的一个语法糖,它的用法有很多,主要作用是双向绑定,在这里我们重点来介绍它在组件通信中的应用,demo如下:
<!-- 父组件内容 -->
<template><!-- 子组件 --><Footer v-model:todos="state.todos"></Footer>
</template><script setup lang="ts">
import Footer from "../components/Footer.vue";
import { reactive } from "vue";const state = reative({todos: []
})
</script>
<!-- 子组件内容 -->
<template><div><button @click="clearAll">清除已完成任务</button></div>
</template><script setup lang="ts">
import { defineProps, defineEmits } from "vue";const props = defineProps({todos: {type: Array,required: true}
})const emits = defineEmits(['update:todos'])const clearAll = () => {let arr = props.todosarr = arr.filter(todo => !todo.isCompleted)emits('update:todos', arr)
}
</script>
父组件通过 v-model 相当于向子组件传递了一个 todos prop 并接收 update:todos 事件,父组件会响应式的更新 todos 数组。
Vue3 组件通信方式【最好用的都在这里了】相关推荐
- vue3组件通信方式
vue3七种组件通信方式 面试题经常会问到vue3组件间的通信方式,下文列举了七种常见的通信方式. props emit v-model refs provide/inject eventBus Vu ...
- Vue3 - 组件通信(父传子)
前言 在 Vue3 中,父组件向子组件传参的方法. 与 Vue2 相比,还是有一些区别的. 基础示例 现在我们的需求是,要通过父组件,传递一个标题来让子组件显示. 子组件 Com.vue: <t ...
- vue3组件通信的方式 父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式 一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
- vue 修改div宽度_Vue 组件通信方式及其应用场景总结(1.5W字)
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...
- c++中获取蓝图组件_Vue组件通信方式居然有这么多?你了解几种
作者:梨香 链接:https://juejin.im/post/6887709516616433677 vue组件通信的方式,这是在面试中一个非常高频的问题,我刚开始找实习便经常遇到这个问题,当时只知 ...
- Vue 组件通信方式居然有这么多?你了解几种
↓推荐关注↓ 前端技术编程 专注于分享前端技术:JS,HTML5,CSS3,Vue.js,React,Angular 等前端框架和前端开源项目推荐! 0篇原创内容 公众号 vue组件通信的方式,这是在 ...
- vue的组件通信方式
组件通信方式 一.props / $emit 1. 父组件向子组件传值 2. 子组件向父组件传值 二. $children / $parent 三.provide/ inject 四.ref / re ...
- 超实用的 Vue 组件通信方式大汇总(8种)
文章目录 前言 一.Vue组件关系 二.Vue组件通信方式 1. props / $emit 1.1 props 父传子 1.2 $emit 子传父 1.3 父子组件双向绑定 1.3.1 v-mode ...
- VUE3组件 (4) 关于 Provide Inject 依赖注入
前言 以下代码和内容的使用都是在setup中,未使用TS. <script setup> </script> VUE3组件 (1) 关于defineProps() VUE3组件 ...
最新文章
- (八)pdf的构成之文件体(page属性)
- Mason 简单笔记
- nessus国内用户不让免费使用了!
- iview select选中值取值_vue+iview 项目
- log4j 打印线程号配置_log4j配置参数
- qt 回调函数设置界面_回调函数实现类似QT中信号机制(最简单)
- 分布式锁与实现(一)——基于Redis实现
- USB设备多个配置描述符的获取过程
- elasticsearch7使用指导
- Python面试题【315+道题】
- 用诗歌描写计算机课,小班诗歌公开课教案范文【3篇】
- 714. 买卖股票的zui佳时机含手续费(JavaScript)
- oracle数据库存储管理总结,oracle数据库存储管理
- 整理Java基础知识--Date Time2
- 【CentOS 7】scp示例
- java-cef系列视频第二集:搭建开发环境
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-4.在线教育后台数据库设计...
- 阿里云原生专家禹杨杨:详解容器的发展、周边生态和落地实践
- 正交法设计测试用例时可以使用的工具allpairs---生成正交表
- 3d打印计算机设计打孔操作,干货:3D打印,建模时你需要注意这10个技巧