Vue父子组件交互方式小结

 

sync后缀

1. 子组件自身事件,更新自身属性,如这里show, 并同时将属性值"同步"给父组件中的data,如这里valueChild
2. 父组件对data改变, 可以同步给子组件的属性

<template>
  <div class="details">
    <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;">
    </myComponent>
    <button @click="changeValue">toggle</button>
  </div>
</template>
<script>
//组件属性(show)的改变,同步到父组件的data,父组件的data值的改变也可以同步到子组件的属性,即父组件与子组件属性值之间的通信
import Vue from "vue";
Vue.component("myComponent", {
  template: `<div v-if="show">
                <p>默认初始值是{{show}}，所以是显示的</p>
                <button @click.stop="closeDiv">关闭</button>
              </div>`,
  props: ["show"],
  methods: {
    closeDiv() {
      this.$emit("update:show", false); //效果是将子组件更新组件内部属性show,并传入新值"false", update是vue 
    }
  }
});
export default {
  data() {
    return {
      valueChild: true
    };
  },
  methods: {
    changeValue() {
      this.valueChild = !this.valueChild;
    }
  }
};
</script>

 vue中emit与on和BUS

形式1  参考

 Vue.prototype.bus = new Vue(); //vue原型链挂载总线

 this.bus.$emit("change",data); //子组件发送数据

this.bus.$on("change",function(data){

})

//子组件接收数据

形式2

var Event = new Vue();
Event.$emit('msg',this.msg);
Event.$on('msg',function(msg){
    //对数据处理
}

第1行: 相当于又new了一个vue实例，Event中含有vue的全部方法；
第2行:发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；
第3行~第5行: 接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作