vue 组件之间的通信

组件之间的说明，分为好几种：
1，父组件向子组件传递数据
2，子组件通过事件向父组件传值
3，兄弟组件互相传值
注：父子组件渲染的一个过程是：父create => 子created => 子mouted => 父mouted

单向数据流，出现在组件通信。
父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错
子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

1，父组件向子组件传递数据

在vue中，可以使用 prop向子组件中传递数据

父组件部分：
首先父组件中引入子组件，三个步骤：
1，引入子组件
2，注册组件
3，在父组件中调用

<child-frist ref=‘child’ :users="userName"></child-frist>
//这里传的值是userName，需要绑定

data() {
    return {//要在data中定义要传的信息
      userName:{name:'parent',mode:"父传子"}
    };
 },

子组件：
子组件通过 props 来接收父组件传来的值

export default {
  name: "child",
  props: ["users"],//` 这里接受的是前面子组件中 :users，并不是userName`
  data() {
    return {};
    }
  }
};

这是，我们就可以看到页面中，父组件传到子组件的信息

image.png

2，子组件通过事件向父组件传值

子组件中

<input type="text" v-model="value" @change="setValue(value)">

setValue(value){// 子组件向父组件传值用 $emit 方法
   this.$emit('changeFu',value)
}

父组件

<!-- 通过$emit 传过来的change事件启用changeParent事件 -->
<p>接收值:</p><span>{{msg}}</span>
   
 ** `父组件中的事件一定要绑定在组件上，否则不生效 `**
<child-second  @changeFu="changeParent"></child-second>

changeParent(value) {
   this.msg = value;
}

3，兄弟组件互相传值

3.1 第一种：

1，在生成vue实例前，给Vue的原型上添加一个bus属性，这个属性是vue的实例；之后创建的vue实例都具有bus这个属性

// main.js
Vue.prototype.bus = new Vue();

在其中一个兄弟组件中设置：

<input type="text" v-model="value" @change="setValue(value)">

// js
 setValue(value){
    console.log(value)
    this.bus.$emit('sharetext', value)//触发事件sharetext
  }

在另中一个兄弟组件中设置

mounted() {
   //let _this = this;因为this的指向发生了变化，不用箭头函数的话就要先把this保存起来
    this.bus.$on("sharetext", value => { //通过$on监听事件sharetext
        this.value = value;
    });
  },

注：不管在那个兄弟组件中，value都要初始化定义
视图：

image.png

3.2 第二种，和前面第一种很类似

1，新建一个js文件，我这里叫做 bus.js；

    // 文件内容
    import Vue from 'vue';  
    export default new Vue();

然后在你需要传值的兄弟组件中分别引入 import bus from '文件路径'

<input type="text" v-model="value" @change="setValue(value)">

setValue(value){
   bus.$emit('sharetext', value)//触发事件sharetext
}

最后在你需要的通信的另一个组件执行如下：

mounted() {
  bus.$on("sharetext", value => {//通过$on监听事件sharetext
    this.value = value;
  });
}

图示：

image.png

4，父组件通知子组件执行事件

子组件

created: function(){
    this.$on('change', function(){
      console.log('something handled!');
    });
  }

父组件

this.$refs['child'].$emit('hange');

5，传值是各种属性时

props: {
    **1， 基础的类型检查（null 匹配任何类型）
    **2，多个可能的类型
    arrayA: [String, Number],
    **3，必填的字符串
    arrayB: {
      type: String,
      required: true
    }，
   **4，带有默认值的数字
    arrayC: {
      type: Numeber,
      default: 100
    }，
   **5，带有默认值的数组 or 传值是数组
    array: { 
        type: Array,
        default: () => { return [ ] } // 或者是下面的方法
        default：function(){
            return [ ]
         }
    },
   **6，带有默认值的对象 or  传值是对象
    object: { 
        type: Object,
        default: () => {} // 或者是下面的方法
        default：function(){
            return { message：‘hello’ }
         }
    }，
   **7，传对象或者数组都可以，两种类型
    code: {
      type: [Object, Array]
    }
}

最后编辑于：2022.01.21 11:13:56