对Vue中组件通信的一些理解
对Vue中组件通信的一些理解
一、介绍
1. 为什么要进行组件通信?
组件可以说是一个具有独立功能的整体,但是当我们要将这些组件拼接在一起时,这些组件互相之间要建立联系,这个联系我们就称之为通信。
2. 组件通信的方式有以下几种:
(1)父子组件通信:
使用props来实现
(2)子父组件通信:
使用自定义事件实现
(3)非父子组件通信:
ref链:可以实现非父子组件的通信,但是如果层级太多,就比较繁琐了($attrs)
bus事件总线
(4)多组件状态共享(多个组件共用同一个数据)
vuex
3.自定义事件
两种方式:
(1)通过 $on 定义,通过 $emit 触发
var vm = new Vue({ el: '#app' }) // 自定义事件的定义( 发布 ) // vm.$on(自定义事件的名称,自定义事件的事件处理程序) vm.$on( 'aa', function () { console.log( 'aa' ) }) //自定义事件的触发 ( 订阅 ) // vm.$emit( 自定义事件的名称,自定义事件处理程序需要的参数1,参数2,参数3) vm.$emit( 'aa' )
(2)通过绑定在组件身上定义,通过 $emit 触发
<Son @aa = "fn"/>
使用: 子父通信
二、父子组件通信
我们先看下面这个案例:
<body> <div id="app"> <Father></Father> </div> <template id="father"> <div> <h3>这里是父组件</h3> <hr> <Son :aa = "money" :mask-flag = "maskFlag"> </Son> </div> </template> <template id="son"> <div> <h3>这里是son组件</h3> <p> 父亲给了我{{ aa }}钱 </p> <p> {{ maskFlag }} </p> </div> </template> </body> <script> Vue.component('Father',{ template:"#father", data () { return { money: 2000, maskFlag: 1000000 } } }) Vue.component('Son',{ template: '#son', props: ['aa','maskFlag'] }) new Vue({ }).$mount('#app') </script>
props:
1.在父组件的模板中将数据用单项数据绑定的形式,绑定在子组件身上
<Son :aa = "money"/>
2.在子组件的配置项中可以使用一个props配置项来接收这个数据,接收时,props的取值可以是一个数组
Vue.component('Son',{ template: '#son', props: ['aa'] })
3.在子组件模板中,接收到的属性可以像全局变量一样直接使用
<p> 父亲给了我 {{ aa }} 钱 </p>
大家心中可能会有如下几个问题:
问题1:props接收的money和子组件上绑定的自定义属性money是不是同一个?
答:一般都是,我们通常会把自定义属性和数据写成一致
问题2:为什么data要定义为一个函数?
答:
1.组件是一个独立的个体,那么它应该拥有自己的数据,这个数据应该是一个独立的数据
2.也就是说这个数据应该有独立作用域,也就是有一个独立的使用范围,这个范围就是这个组件内
3.js最大的特征就是:函数式编程
问题3:为什么data要有返回值?返回值还是一个对象?
答:
1.因为Vue是通过observer来观察data选项的,所以必须要有返回值
2.因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置
三、子父组件通信
先看下面的案例:
<body> <div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> 这里是father组件 </h3> <p> 儿子给了我 {{ money }} </p> <Son @give = "getHongbao"></Son> </div> </template> <template id="son"> <div> <button @click = "giveFather"> give </button> <h3> 这里是son组件 </h3> </div> </template> </body> <script> Vue.component('Father',{ template: '#father', data () { return { money: 0 } }, methods: { getHongbao ( val ) { console.log( 1 ) this.money = val } } }) Vue.component('Son',{ template: '#son', data () { return { hongbao: 500 } }, methods: { giveFather () { //如何进行父组件给子组件的自定义事件触发 this.$emit('give',this.hongbao) } } }) new Vue({ el: '#app' }) </script>
子父通信流程:
1.在父组件的模板中,通过事件绑定的形式,绑定一个自定义事件在子组件身上
<Son @aa = "fn"/> //这边要注意: fn是要在父组件配置项methods中定义
这里要提一下自定义事件的两种方法:
(1)自定义事件通过 on定义,on 定义,on定义,emit触发
(2)通过绑定在组件身上定义,通过 $emit 触发
2.在子组件的配置项methods中写一个事件处理程序,在事件处理程序中触发父组件绑定的自定义事件
Vue.component('Son',{ template: '#son', data () { return { hongbao: 500 } }, methods: { giveFather () { //如何进行父组件给子组件的自定义事件触发 this.$emit('give',this.hongbao) } } })
3.将子组件定义的事件处理程序giveFather,绑定在子组件的按钮身上
<template id="son"> <div> <button @click = "giveFather"> give </button> <h3> 这里是son组件 </h3> </div> </template>
四、非父子组件通信
1.ref链
案例:
<body> <div id="app"> <Father></Father> </div> <template id="father"> <!-- 组件中根元素必须唯一 --> <div> <h3> 这里是father </h3> <button @click = "look"> 点击查看father的this </button> <p> father的 n: {{ n }} </p> <hr> <Son ref = "son"></Son> <Girl ref = "girl" :n = "n"></Girl> </div> </template> <template id="son"> <div> <h3> 这里是 son 1 </h3> </div> </template> <template id="girl"> <div> <h3> 这里是girl </h3> <button @click = "out"> 输出girl的this </button> </div> </template> </body> <script> /* 通过ref绑定组件后,我们发现在他们的共同父组件的 $refs里面可以找到子组件 */ Vue.component('Father',{ template: '#father', data () { return { n: 0 } }, methods: { look () { this.n = this.$refs.son.money } } }) Vue.component('Son',{ template: '#son', data () { return { money: 1000 } } }) Vue.component('Girl',{ template: '#girl', data () { return { num: 0 } }, methods: { out () { console.log( this ) console.log( this.$attrs ) } } }) new Vue({ el: '#app' }) </script>
2.bus事件总线
bus事件总线,我们是通过 $on来定义事件, 通过 $emit来触发事件
案例:哥哥揍弟弟,弟弟哭
<body> <div id ="app"> <Bro></Bro> <Sma></Sma> </div> <template id="big"> <div> <h3> 这里是哥哥组件 </h3> <button @click = "hick"> 揍 </button> </div> </template> <template id="small"> <div> <h3> 这里是弟弟组件 </h3> <p v-show = "flag"> 呜呜呜呜呜呜 </p> </div> </template> </body> <script> var bus = new Vue() // bus原型上是不是有 $on $emit Vue.component('Bro',{ template: '#big', methods: { hick () { bus.$emit('aa') } } }) Vue.component('Sma',{ template: '#small', data () { return { flag: false } }, mounted () { //当前组件挂载结束,也就是我们可以在页面当中看到真实dom // mounted这个钩子函数的触发条件是组件创建时会自动触发 // 事件的声明 var _this = this bus.$on('aa',function () { _this.flag = true console.log( this )//这里是this指的是bus, 但是我们需要的this应该是Sma这个组件 }) } }) new Vue({ el: '#app' }) </script>
bus事件总线流程:
bus事件总线,我们是通过 $on来定义事件, 通过 $emit来触发事件
(1)在其中一个组件的 挂载钩子函数 上 做事件的声明
Vue.component('Sma',{ template: '#small', data () { return { flag: false } }, mounted () { //当前组件挂载结束,也就是我们可以在页面当中看到真实dom // mounted这个钩子函数的触发条件是组件创建时会自动触发 // 事件的声明 var _this = this bus.$on( 'aa',function () { _this.flag = true console.log( this )//这里是this指的是bus, 但是我们需要的this应该是Sma这个组件 }) } })
(2)在另一个组件中 通过 bus.$emit( ‘aa’ )来触发这个自定义事件
五、非常规组件通信1(使用自定义事件实现子父组件通信)
业务:进行子父组件通信
理解:使用自定义事件实现
实现的流程:父组件将一个方法通过属性绑定的形式给了子组件,子组件先是通过props接收这个方法,再执行这个方法
<body> <div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> 这里是father的组件 </h3> <p> 这里是父组件的n: {{ n }} </p> <Son :add = "add"></Son> </div> </template> <template id="son"> <div> <h3> 这里是son组件 </h3> <button @click = "add(money)"> give </button> </div> </template> </body> <script> Vue.component('Father',{ template: '#father', data () { return { n:0 } }, methods: { add (val) { this.n = val } } }) Vue.component('Son',{ template: '#son', data () { return { money: 1000 } }, props: ['add'] }) new Vue({ el: '#app' }) </script>
但这个方法不推荐大家使用,因为MVVM框架是单向数据流,但是上面的方法违背了单向数据流
六、非常规组件通信2
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <Father></Father> </div> <template id="father"> <div> <h3>这里是father组件</h3> <p> father: 小金库: {{ xiaojinku.money }} </p> <Son :xiaojinku = "xiaojinku"></Son> </div> </template> <template id="son"> <div> <h3>这里是son组件</h3> <button> give </button> <input type="text" v-model = "xiaojinku.money"> <p> son 小金库: {{ xiaojinku.money }} </p> </div> </template> </body> <script> /* 父组件传递一个 对象类型 给 子组件 子组件通过 props 接收 就会发现: 子组件修改这个数据的时候,父组件的数据也随之改变了 ? why? 因为父组件给子组件的是对象的引用地址 这种方法我们不推荐使用 , 违背了单向数据流 */ Vue.component('Father',{ template: '#father', data () { return { xiaojinku: { money: 1000 } } } }) Vue.component('Son',{ template: '#son', props: ['xiaojinku'] }) new Vue({ el: '#app' }) </script>
- vue2.0之父子组件通信的理解
- 关于Vue中组件传值,以及emit方法的一些个人理解
- VUE组件的一些补充(父子,兄弟,同级,跨级组件的通信)
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 七周七种前端框架四:Vue.js 组件和组件通信
- 详解vue2.0组件通信各种情况总结与实例分析
- Vue之非父子组件通信
- vue饿了么(六)--ratingselect组件 & 父组件food.vue和子组件ratingselect.vue通信
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- 对STM32F10xxx中UART通信的一些理解
- VUE(一)组件之间的通信
- 封装Vue组件的一些技巧
- vue父子组件通信
- Vue.js组件之同级之间的通信
- Vue.js组件间通信方式总结【推荐】
- vue父子组件通信
- Vue组件(components)个人理解
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- vue路由组件传参-页面通信