Vue父子组件交互方式小结

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

sync后缀

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

 1 <template>
 2   <div class="details">
 3     <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;">
 4     </myComponent>
 5     <button @click="changeValue">toggle</button>
 6   </div>
 7 </template>
 8 <script>
 9 //组件属性(show)的改变,同步到父组件的data,父组件的data值的改变也可以同步到子组件的属性,即父组件与子组件属性值之间的通信
10 import Vue from "vue";
11 Vue.component("myComponent", {
12   template: `<div v-if="show">
13                 <p>默认初始值是{{show}}，所以是显示的</p>
14                 <button @click.stop="closeDiv">关闭</button>
15               </div>`,
16   props: ["show"],
17   methods: {
18     closeDiv() {
19       this.$emit("update:show", false); //效果是将子组件更新组件内部属性show,并传入新值"false", update是vue 
20     }
21   }
22 });
23 export default {
24   data() {
25     return {
26       valueChild: true
27     };
28   },
29   methods: {
30     changeValue() {
31       this.valueChild = !this.valueChild;
32     }
33   }
34 };
35 </script>

 vue中emit与on和BUS

形式1  参考

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

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

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

//子组件接收数据

形式2

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

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

以上是 Vue父子组件交互方式小结 的全部内容， 来源链接： utcz.com/z/374978.html

回到顶部