vue组件通信

Myth丶恋晨 2021-09-02 03:34 600阅读 0赞

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。

*  props和$emit(常用)
 *  $attrs和$listeners
 *  中央事件总线（非父子组件间通信）
 *  v-model
 *  provide和inject
 *  $parent和$children
 *  vuex

### **1.props和$emit** 父组件向子组件传 ###

父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的.

父组件向子组件通信分成两步

第一步 为子组件元素添加属性数据。

要遵守html命名规范：字母小写，横线分割单词。

属性值是默认是字符串，想传递变量，要使用v-bind指令，动态传递。

第二步 在子组件中，通过props属性接收数据。

命名规范：转化成驼峰式命名。

属性值有两种情况

第一种：简单接收数据

属性值是数组，每一个成员代表一个属性数据。

第二种：对接收的数据做校验

属性值是对象

//App.vue父组件
    <template>
      <div id="app">
        <users v-bind:users="users"></users> //前者自定义名称便于子组件调用，后者要传递数据名
      </div>
    </template>
    <script>
    import Users from "./components/Users"
    export default {
      name: 'App',
      data(){
        return{
          users:["Henry","Bucky","Emily"]
        }
      },
      components:{
        "users":Users
      }
    }

//users子组件
    <template>
      <div class="hello">
        <ul>
          <li v-for="user in users">{
       {user}}</li>//遍历传递过来的值，然后呈现到页面
        </ul>
      </div>
    </template>
    <script>
    export default {
      props:{
        users:{           //这个就是父组件中子标签自定义名字
          // 类型
          type:Array,
           // 必填的
          required:true
        }
      }
    }
    </script>

**总结：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed**

### 2.子组件向父组件传值（通过事件形式） 子组件$emit  父组件/$on ###

// 子组件
    <template>
      <header>
         //绑定一个点击事件
        <h1 @click="changeTitle">{
       {title}}</h1>  
      </header>
    </template>
    <script>
    export default {
      name: 'app-header',
      data() {
        return {
          //文本
          title:"Vue.js Demo"
        }
      },
      methods:{
        //事件
        changeTitle() {
           //自定义事件  传递值“子向父组件传值”
          this.$emit("titleChanged","子向父组件传值");
        }
      }
    }
    </script>

// 父组件
    <template>
      <div id="app">
         //与子组件titleChanged自定义事件保持一致
        <app-header v-on:titleChanged="updateTitle" ></app-header>
         // updateTitle($event)接受传递过来的文字
        <h2>{
       {title}}</h2>
      </div>
    </template>
    <script>
    import Header from "./components/Header"
    export default {
      name: 'App',
      data(){
        return{
          title:"传递的是一个值"
        }
      },
      methods:{
        updateTitle(e){   //声明这个函数
          this.title = e;
        }
      },
      components:{
       "app-header":Header,
      }

**另一种方式**

**这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级**。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

//父组件
    <div id="app">
        <my-a></my-a>
        <my-b></my-b>
        <my-c></my-c>
    </div>
    //A
    <template id="a">
      <div>
        <h3>A组件：{
       {name}}</h3>
        <button @click="send">将数据发送给C组件</button>
      </div>
    </template>
    //B
    <template id="b">
      <div>
        <h3>B组件：{
       {age}}</h3>
        <button @click="send">将数组发送给C组件</button>
      </div>
    </template>
    //C
    <template id="c">
      <div>
        <h3>C组件：{
       {name}}，{
       {age}}</h3>
      </div>
    </template>
    <script>
    
    var Event = new Vue();//定义一个空的Vue实例
    
    
    var A = {
        template: '#a',
        data() {
          return {
            name: 'tom'
          }
        },
        methods: {
          send() {
            //传值
            Event.$emit('data-a', this.name);
          }
        }
    }
    
    
    var B = {
        template: '#b',
        data() {
          return {
            age: 20
          }
        },
        methods: {
          send() {
            //传值
            Event.$emit('data-b', this.age);
          }
        }
    }
    
    
    var C = {
        template: '#c',
        data() {
          return {
            name: '',
            age: ""
          }
        },
        mounted() {//在模板编译完成后执行
         Event.$on('data-a',name => {
             this.name = name;//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
         })
         Event.$on('data-b',age => {
             this.age = age;
         })
        }
    }
    
    
    var vm = new Vue({
        el: '#app',
        //定义组件
        components: {
          'my-a': A,
          'my-b': B,
          'my-c': C
        }
    });    
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

`$on` 监听了自定义事件 data-a和data-b，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。

### **3：$attrs和$listeners** 能够让组件A之间传递消息给组件C。 ###

第二种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C。

// 父组件
    <template>
      <div id="app">
            <p>this is parent compoent!</p>
           //子组件b  :messagec传递给c :message给b  getCData传递给c getChildData给b
           <B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B>
      </div>
    </template>
    <script>
    import Header from "./components/B"
    export default {
      name: 'App',
      data(){
        return{
           message:'hello',
           messagec:'hello c'  //传递给c组件的数据
        }
      },
      methods:{
        getChildData(val){
             console.log('这是来自B组件的数据')
           },
            //执行C子组件触发的事件
           getCData(val){
             console.log("这是来自C组件的数据："+val)
           }
      },
      components:{
       "B":B,
      }

// 子组件B
    <template>
      <header>
          <input type="text" v-model="mymessage" @input="passData(mymessage)">
           
            
            <C v-bind="$attrs" v-on="$listeners"></C>
      </header>
    </template>
    <script>
    export default {
      //获取组件c
      components:{
       "c":c,
      },
      props:['message'],//得到父组件传递过来的数据
    
      data() {
        return {
          //文本 mymessage=父组件传递过来的message
          mymessage:this.message
        }
      },
    
      methods:{
        passData(val){
             //触发父组件中的事件
            this.$emit('getChildData',val)
          }
    
    }
    </script>

// B组件的子组件C
    <template>
      <header>
          <input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> 
      </header>
    </template>
    <script>
    export default {
    
      data() {
        return {
        
        }
      },
    
      methods:{
        passCData(val){
            //触发父组件A中的事件
              this.$emit('getCData',val)
           }
    
    }
    </script>

### **4：中央事件总线 vue.bus** ###

上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。

*  使用：兄弟组件之间传值；
 *  安装： `npm install vue-bus`
 *  在main.js 中引入vuebus：
    
        import Vue from 'vue';
        import VueBus from 'vue-bus';
         
        Vue.use(VueBus);
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

Vue.component('brother1',{
        data(){
          return {
            mymessage:'hello brother1'
          }
        },
        template:`
          <div>
            <p>this is brother1 compoent!</p>
            <input type="text" v-model="mymessage" @input="passData(mymessage)">
          </div>
        `,
        methods:{
          passData(val){
            //触发全局事件globalEvent
            bus.$emit('globalEvent',val)
          },
    
        }
      })
    
      Vue.component('brother2',{
        template:`
          <div>
            <p>this is brother2 compoent!</p>
            <p>brother1传递过来的数据：{
       {brothermessage}}</p>
          </div>
        `,
        data(){
          return {
            mymessage:'hello brother2',
            brothermessage:''
          }
        },
        //组件渲染完成
        mounted(){
          //绑定全局事件globalEvent
          bus.$on('globalEvent',(val)=>{
            this.brothermessage=val;
          })
        },
      //组件销毁
      destroyed:function(){
        this.$bus.off("globalEvent");
    }
      })
    
    
      //中央事件总线
      var bus=new Vue();
      var app=new Vue({
        el:'#app',
        template:`
          <div>
            <brother1></brother1>
            <brother2></brother2>
          </div>
        `
      })

### **5：provide和inject**用于父级组件向下传递数据。 ###

在 Vue.js 的 `2.2.0+` 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

//子组件
    Vue.component('child',{
        inject:['for'],//得到父组件传递过来的数据
        data(){
          return {
            mymessage:this.for
          }
        },
        template:`
          <div>
            <input type="tet" v-model="mymessage">
          </div>
      })
    
    
      //父组件
      Vue.component('parent',{
        template:`
          <div>
            <p>this is parent compoent!</p>
            <child></child>
          </div>
        `,
        provide:{
          for:'test'
        },
        data(){
          return {
            message:'hello'
          }
        }
      })

### **6：v-model** ###

父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值

Vue.component('child',{
        props:{
          value:String, //v-model会自动传递一个字段为value的prop属性
        },
        data(){
          return {
            mymessage:this.value
          }
        },
        methods:{
          changeValue(){
            this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值
          }
        },
        template:`
          <div>
            <input type="text" v-model="mymessage" @change="changeValue">
          </div>
      })
    
    
    
      Vue.component('parent',{
        template:`
          <div>
            <p>this is parent compoent!</p>
            <p>{
       {message}}</p>
            <child v-model="message"></child>
          </div>
        `,
        data(){
          return {
            message:'hello'
          }
        }
      })
      var app=new Vue({
        el:'#app',
        template:`
          <div>
            <parent></parent>
          </div>
        `
      })

### **7：$parent和$children** ###

在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.

Vue.component('child',{
        props:{
          value:String, //v-model会自动传递一个字段为value的prop属性
        },
        data(){
          return {
            mymessage:this.value
          }
        },
        methods:{
          changeValue(){
            this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
          }
        },
        template:`
          <div>
            <input type="text" v-model="mymessage" @change="changeValue">
          </div>
      })
    
    
    
      Vue.component('parent',{
        template:`
          <div>
            <p>this is parent compoent!</p>
            <button @click="changeChildValue">test</button >
            <child></child>
          </div>
        `,
        methods:{
          changeChildValue(){
            this.$children[0].mymessage = 'hello';
          }
        },
        data(){
          return {
            message:'hello'
          }
        }
      })
      var app=new Vue({
        el:'#app',
        template:`
          <div>
            <parent></parent>
          </div>
        `
      })

vuex另一篇文章

[https://blog.csdn.net/qq\_41328247/article/details/108654238][https_blog.csdn.net_qq_41328247_article_details_108654238]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/62b18bebfc5b4bbdbc7227d6e044c037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/f9a90de2d57d46c3bea6f160b067153b.png
[https_blog.csdn.net_qq_41328247_article_details_108654238]: https://blog.csdn.net/qq_41328247/article/details/108654238