vue组件通信

最新推荐文章于 2024-08-22 10:38:34 发布

npc_energy

最新推荐文章于 2024-08-22 10:38:34 发布

阅读量177

点赞数

文章标签： vue组件通信

本文链接：https://blog.csdn.net/npc_energy/article/details/93663493

版权

组件通信

为什么要进行组件通信

组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们称之为通信

组件的通信方式有哪几种？
1 . 父子组件通信
使用 props 来实现
1. 在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
2. 在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组
  Vue.component(‘Son’,{
  template: ‘#son’,
  props: [‘money’]
  })
3. 在子组件模板中，接收到的属性可以像全局变量一样直接使用
{{ money }}

2 . 子父组件通信
使用自定义事件来实现

自定义事件
1. 自定义的通过 $on 定义 $emit触发
2. 通过绑定在组件身上定义，通过 $emit触发

       子父通信流程
           1. 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件    在子组件身上
            <Son @aa = "fn"/> //这边要注意： fn是要在父组件配置项methods中定义
               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>

3 . 非父子组件通信
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>

bus事件总键

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')来触发这个自定义事件

4 . 多组件状态共享（多个组件共用同一个数据）
vuex