八种Vue组件间通讯方式合集(推荐)
前言
Vue 提供了各种各样的通讯,其中包括 兄弟间
的通讯和 非兄弟间
的通讯,借此机会做个总结,查阅起来方便。如果喜欢的话可以帮忙点个赞 :+1: 或者关注一下 :yum:
1、props
目录结构
ponents ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1
代码结构
在父亲组件中使用儿子组件,给儿子通过 :date="xxx"
单向传值
<template> <div> <div>爸爸:{{date}}</div> <Son1 :date="date"></Son1> </div> </template> <script> import Son1 from "./son1"; export default { ponents: { Son1 }, data() { return { date: 1, }; }, }; </script>
儿子组件通过 props
接受父组件传过来的值
<template> <div>儿子:{{date}}</div> </template> <script> export default { props: { date: { type: Number, //校验类型 default: "1", }, }, }; </script>
2、$emit
目录结构
ponents ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1
代码结构
子组件通过触自身的方法来触发 $emit
方法,再触发父组件的方法,通过 回调传参
的方式将修改的内容传递给父组件
<template> <div> <div>儿子:{{date}}</div> <button @click="changeNum">修改</button> </div> </template> <script> export default { props: { date: { type: Number, default: "1", }, }, methods: { changeNum() { this.$emit("changeNum", 2); }, }, }; </script>
父组件接受回调 params
参数,即爸爸需要给儿子绑定了一个自定义的事件, $on("changeNum",params)
<template> <div> <div>爸爸:{{date}}</div> <Son1 :date="date" @changeNum="changeNum"></Son1> </div> </template> <script> import Son1 from "./son1"; export default { ponents: { Son1 }, data() { return { date: 1, }; }, methods: { changeNum(params) { this.date = params; }, }, }; </script>
.sync
目录结构
ponents ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1
代码结构
子组件通过 $emit("update:xxx")
发射事件
<template> <div> <div>儿子:{{date}}</div> <button @click="changeNum">修改</button> </div> </template> <script> export default { props: { date: { type: Number, default: "1", }, }, methods: { changeNum() { this.$emit("update:date", 2); }, }, }; </script>
父组件通过 :xxx.sync="xxx"
接受参数
<template> <div> <div>爸爸:{{date}}</div> <Son1 :date.sync="date"></Son1> </div> </template> <script> import Son1 from "./son1"; export default { ponents: { Son1 }, data() { return { date: 1, }; }, }; </script>
<Son1 :date.sync="date"></Son1> //这个写法是上面的替代品 默认组件内部触发 update:count 规定写法 <Son1 :date="date" @update:date="val=>date=val"></Son1>
v-model
目录结构
ponents ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1
代码结构
子组件触发的事件只能是 input
事件,接收 props
的属性名只能叫 value
<template> <div> <div>儿子:{{value}}</div> <button @click="changeNum">修改</button> </div> </template> <script> export default { props: { value: { type: Number, default: 1, }, }, methods: { changeNum() { this.$emit("input", 2); }, }, }; </script>
父组件通过 v-model
接收参数
<template> <div> <div>爸爸:{{value}}</div> <Son1 v-model="value"></Son1> </div> </template> <script> import Son1 from "./son1"; export default { ponents: { Son1 }, data() { return { value: 1, }; }, }; </script>
<Son1 :value="value" @input="val=>value=val"></Son1> //这个写法是上面的替代品 默认组件内部触发 input 规定写法 <Son1 v-model="value"></Son1>
v-model
局限只能传递一个属性 如果只有一个 可以使用 v-model
多个依然需要使用 .sync
3、 $parent和 $children
目录结构
ponents ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1 ├── Grandson1.vue //孙子1
代码结构
如下场景:孙子想要给爷爷传递数据,孙子需要找到爷爷身上的事件去传递 $parent.$emit
<template> <div> <div>孙子{{value}}</div> <button @click="$parent.$emit('change',3)">修改</button> </div> </template> <script> export default { props: { value: { type: Number, default: "", }, }, }; </script>
儿子组件使用孙子组件
<template> <div> <div>儿子:{{value}}</div> <grandson1 :value="value"></grandson1> </div> </template> <script> import grandson1 from "./grandson1"; export default { ponents: { grandson1, }, props: { value: { type: Number, default: 1, }, }, }; </script>
爸爸身上给孙子自定义change事件
<template> <div> <div>爸爸:{{value}}</div> <Son1 @change="val=>value=val" :value="value"></Son1> </div> </template> <script> import Son1 from "./son1"; export default { ponents: { Son1 }, data() { return { value: 1, }; }, }; </script>
如果层级很深那么就会出现 $parent.$parent.....
我们可以封装一个 $dispatch
方法向上进行派发
Vue.prototype.$dispatch = function $dispatch(eventName, data) { let parent = this.$parent; while (parent) { parent.$emit(eventName, data); parent = parent.$parent; } };
相同的道理,如果既然能够向上寻找父亲,就能向下寻找儿子,也可以封装一个向下派发的方法 $broadcast
Vue.prototype.$broadcast = function $broadcast(eventName, data) { const broadcast = function () { this.$children.forEach((child) => { child.$emit(eventName, data); if (child.$children) { $broadcast.call(child, eventName, data); } }); }; broadcast.call(this, eventName, data); };
4、 $attrs和 $listeners
目录结构
ponents ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1 ├── Grandson1.vue //孙子1
$attrs
批量向下传入属性
<template> <div> <div>爸爸:{{value}}</div> <Son1 @change="val=>value=val" :value="value"></Son1> </div> </template> <script> import Son1 from "./son1"; export default { ponents: { Son1 }, data() { return { value: 1, }; }, }; </script>
在儿子组件中使用 $attrs属性,配合 v-bind
可以将属性继续向下传递
<template> <div> <div>儿子:{{$attrs.value}}</div> <grandson1 v-bind="$attrs"></grandson1> </div> </template> <script> import grandson1 from "./grandson1"; export default { ponents: { grandson1, }, mounted() { console.log(this.$attrs); }, }; </script>
注意一点:在使用 $attrs的时候,如果组件中使用了 props
就会将属性从当前 attrs
移除掉
在孙子组件中使用 $attrs属性,可以将属性继续向下传递
<template> <div> <div>孙子{{$attrs.value}}</div> </div> </template> <script> export default { //props: { // value: Number, /
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程