vue 组件之间通信

一、父向子传值

父组件（通过自定义 attribute 来传递数据）

  Prop 的大小写详情见官方

<hello-world msg="Welcome to Your Vue.js App" :post-title="num"></hello-world>

data() {
    return {
        num: 1,
    };
}

子组件（通过props接收数据）

props 可以是数组或对象，用于接收来自父组件的数据。

props基于对象的语法见官方

<p>{{ postTitle }}</p>

props: {
    msg: String,
    postTitle: {
        type: Number,
    },
}

子组件不能直接修改父组件传递过来的数据,而是在子组件里面写一个data(){}来存储接收过来的数据,子组件直接操作自己存的数据即可。

二、子向父传值

父组件（通过监听自定义事件）

<!-- 监听事件 my-event -->
<hello-world @my-event="showMsg"></hello-world>

methods: {
    showMsg(msg) {
        console.log(msg);
    },
}

子组件（通过自定义事件 $emit）

触发当前实例上的事件。附加参数都会传给监听器回调。推荐你始终使用 kebab-case 的事件名。

<button @click="handleClick">子向父传值</button>


methods: {
    handleClick() {
        // 触发事件 my-event
        this.$emit("my-event","1");
    },
}

三、非父子之间组件之间传值

vue2中bus作为一个中转站，实现非父子之间组件之间的通信，具体使用方法如下:

1.在main.js中注册全局的bus

Vue.prototype.bus=new Vue();

2.在组件中使用

// A组建使用：this.bus.$emit('自定义事件名',实参)

methods:{

        handleClick(){
        // 触发事件 my-event
        this.bus.$emit('my-event',true)
       }
}

// B组建使用:this.bus.$on("自定义事件名", msg => {})

mounted() {
    // 监听事件 my-event
    this.bus.$on("my-event", msg => {

    this.show = msg;
   });

}

 

当然，event bus 只适于某些不复杂的场景，在需要频繁进行组件通信的情况下，还是应该尽量使用 Vuex ，不仅使用上更加简单，同时数据流的流向也会相对清晰。