欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解Vue组件之间通信的七种方式

程序员文章站 2022-04-10 13:48:46
使用vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。 父子组件之间的通信 1)props和$emit 父组件通过props将...

使用vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。

父子组件之间的通信

1)props和$emit

父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作
具体代码如下:

  

 ```
    // 父组件
    <template>
      <div>
        <h3>props和$emit</h3>
        <children v-on:changemsg="changemsg" :msg="msg"/>
      </div>
    </template>
    <script>
    import children from './children';
    export default {
      data() {
        return {
          msg: '传递的值'
        }
      },
      components: {
        children
      },
      methods: {
        changemsg(val) {
          this.msg = val;
        }
      }
    }
    </script>
    // 子组件
    <template>
      <div>
        <h3 @click="notify">{{msg}}</h3>
      </div>
    </template>
    
    <script>
    export default { 
      data(){
        return {
    
        }
      }, 
      props: ['msg'],
      methods: {
        notify() {
          this.$emit('changemsg', '修改后的');
        }
      }
    }
    </script>
  ```

2)vm.$parent和vm.$children

vm.$parent: 父实例,如果当前实例有的话

vm.$children: 获取当前实例的直接直接子组件,需要注意的是$children并不保证顺序,也不是响应式的

具体代码如下:

  

```
    // 父组件的代码
    <template>
      <div>
        <h3>{{title}}</h3>
        <button @click="amend">在父组件中修改子组件的标题</button>
        <children />
      </div>
    </template>
    
    <script>
    import children from './children.vue';
    export default {
      data() {
        return {
          title: '父组件'
        }
      },
      components: {
        children
      },
      methods: {
        amend() {
          this.$children[0].title = '修改后的子组件标题';
        }
      }
    }
    </script>
    // 子组件的代码
    <template>
      <div>
        <h3>{{title}}</h3>
        <button @click="amend">在子组件中修改父组件的标题</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: '子组件'
        }
      },
      methods: {
        amend() {
          this.$parent.title = '修改后的父组件标题';
        }
      }
    }
    </script>
  ```

3)自定义事件的v-model

https://cn.vuejs.org/v2/guide/components-custom-events.html#%e8%87%aa%e5%ae%9a%e4%b9%89%e7%bb%84%e4%bb%b6%e7%9a%84-v-model
具体代码如下:

  

 ```
    // 父组件
    <template>
      <div>
        标题:<input type="text" v-model="mymessage"><br />
        <children v-model="mymessage" />
      </div>
    </template>
    
    <script>
    import children from './children.vue';
    export default {
      data() {
        return {
          mymessage: '名字',
        }
      },
      components: {
        children
      }
    }
    </script>
    // 子组件
    <template>
      <div>
        <input type="text" :value="mymessage" @input="changevalue"> 
      </div>
    </template>
    
    <script>
    export default {
      model: {
        prop: 'mymessage',
        event: 'input'
      },
      props: ['mymessage'],
      methods: {
        changevalue(event){
          this.$emit('input', event.target.value);
        }
      }
    }
    </script>
  ```

祖先组件和其子孙组件通信

1)provide/inject

provide/inject,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下文关系成立的时间里始终生效

     

具体代码如下:

   

```
    // 父组件
    <template>
      <div>
        <h3>{{title}}</h3>
        <children />
      </div>
    </template>
    
    <script>
    import children from './children.vue';
    export default {
      data() {
        return {
          title: '父组件的标题'
        }
      },
      provide() {
        return {
          updatetitle: this.updatetitle
        }
      },
      methods: {
        updatetitle(title) {
          this.title = title;
        }
      },
      components: {
        children
      }
    }
    </script>
    // 子组件
    <template>
      <div>
        <button @click="changeattr">修改父组件的属性</button>
        <grandson />
      </div>
    </template>
    
    <script>
    import grandson from './grandson.vue';
    export default {
      data() {
        return {
          
        }
      },
      inject: ['updatetitle'],
      methods: {
        changeattr() {
          this.updatetitle('子组件修改标题');
        }
      },
      components: {
        grandson
      }
    }
    </script>
    // 孙组件
    <template>
      <div>
        <button @click="changeattr">修改祖先组件的属性</button>
      </div>
    </template>
    
    <script>
    export default {
      inject: ['updatetitle'],
      methods: {
        changeattr() {
          this.updatetitle('孙组件修改标题');
        }
      }
    }
    </script>
  ```

2)$attrs和$listeners

组件a下面有一个组件b,组件b下面有一个组件c,如果想将组件a的数据和自定义事件传递给组件c,就可以使用$attrs和$listeners。

vm.$attrs: 当一个组件没有声明任何 prop 时(没有在props声明属性),这里会包含所有父作用域的绑定 ,并且可以通过 v-bind="$attrs" 传入内部组件

vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

具体代码如下:

```
  // 父组件
  <template>
    <div>
      <children :msg="msg" v-on:changemsg="changemsg"/>
    </div>
  </template>
  
  <script>
  import children from './children';
  export default {
    data() {
      return {
        msg: '下发数据',
        test: '123'
      }
    },
    components: {
      children
    },
    methods: {
      changemsg() {
        this.msg = '修改后的数据';
      }
    }
  }
  </script>
  // 子组件
  <template>
    <div>
      <grandson v-bind="$attrs" v-on="$listeners"/>
    </div>
  </template>
  
  <script>
  import grandson from './grandson';
  export default {
    components: {
      grandson
    }
  }
  </script>
  // 孙组件
  ```
    <template>
      <div>
        <h3>{{$attrs.msg}}</h3>
        <button @click="change">修改数据</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
    
        }
      },
      methods: {
        change() {
          this.$emit('changemsg')
        }
      }
    }
    </script>

  ```
```

非父子组件之间的通信

通过*事件总线来进行通信

通过新建一个vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用*事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。

具体代码如下:

  ```
    // 父组件
    <template>
      <div>
        <one />
        <two />
      </div>
    </template>
    <script>
    import one from './one.vue';
    import two from './two.vue';
    export default {
      data() {
        return {
        }
      },
      components: {
        one,
        two
      }
    }
    </script>
    // one组件
    <template>
      <div>
        <h3>第一个组件</h3>
        <button @click="add">增加数量</button>
      </div>
    </template>
    <script>
    import {bus} from './index.js';
    export default {
      data() {
        return {
        }
      },
      methods: {
        add() {
          bus.$emit('add');
        }
      },
      beforedestory() {
        bus.$off('add');
      }
    }
    </script>
    // two组件
    <template>
      <div>
        <h3>第二个组件</h3>
        <h3>数量: {{num}}</h3>
      </div>
    </template>
    <script>
    import {bus} from './index.js';
    export default {
      data() {
        return {
          num: 1
        }
      },
      mounted() {
        bus.$on('add', () => {
          this.num += 1;
        })
      },
      beforedestroy() {
        bus.$off('add');
      }
    }
    </script>
    // index.js 创建的bus
    import vue from 'vue';
    export const bus = new vue({
    }) 
  ```

通过vuex来进行数据管理,具体内容见vuex官网

如果有什么不对的地方,或者还有什么方法我没有写到,希望大家可以提出来,谢谢。

总结

以上所述是小编给大家介绍的vue组件之间通信的七种方式,希望对大家有所帮助