【vue】组件的使用（6）父子组件之间的通信demo

[Kelichao]

父子组件之间的通信

一、给子组件传递字符串

<div id="m-dialog">
<!-- 
<child value="str"></child>
该种方法“只能传递字符串”，
将child的data中的value = "str";不需要父组件data中有数据
 -->
    <child value="str"></child>
</div>

Vue.component("child", {
    // 获取value的依赖
    props:["value"],
    template: '<span>{{ value }}</span>'
});
new Vue({
    // 这里的el可视为父组件
    // 所以下面这个片段是放在#m-dialog里面的
    el:"#m-dialog"
});

二、父组件给子组件传递数据

<div id="m-dialog">
<!-- 
将组件的数据state与父组件的数据flag绑定在了一起
执行 vue1.flag= false 会对组件数据进行重新渲染
 -->
    <child v-bind:state="flag"></child>
</div>

Vue.component("child", {
    // 获取value的依赖
    props:["state"],
    template: '<span>{{ state }}</span>'
});
var vue1 = new Vue({
    // 这里的el可视为父组件
    // 所以下面这个片段是放在#m-dialog里面的
    el:"#m-dialog",
    data: {
        flag: true
    }
});

三、子组件数据传递给父组件

因为父子组件的数据绑定是单向的，所以子组件数据的变化不会影响的到父组件

因此要通过事件的监听来主动通知父组件对应子组件的数据变化

<div id="m-dialog">
<!-- 
v-on:cancle="other"表示如果触发组件中的cancle事件
则连带触发父组件中的other时间
 -->
    <child v-on:cancle="other"></child>
</div>

Vue.component("child", {
    template: '<button v-on:click="cancle">我是按钮，点我触发父组件事件</button>',
    methods: {
        cancle: function() {
            // 与父组件通信一定要加上这句话
            this.$emit('cancle');
        }
    }
});
var vue1 = new Vue({
    // 这里的el可视为父组件
    // 所以下面这个片段是放在#m-dialog里面的
    el:"#m-dialog",
    data: {
        flag: true
    },
    methods: {
        other: function() {
            alert();
        }
    }
});

非父子容器之间的通信

// 建立一个空容器
var bus = new Vue()

// 在组件 B 创建的钩子中监听事件
// $on用于监听事件
bus.$on('event', function (id1,id2) {
  // ...
  alert(a);// 弹出1
  alert(a);// 弹出2
})

// 触发组件 A 中的事件
// 触发了event事件, 后面为参数
bus.$emit('event', 1, 2);

[HXCStudio123]

感谢