Vue组件间的数据传输
1.父组件向子组件传输数据:自定义属性
1 //父组件 2 <Son :msg="message" :user="userinfo"></Son> 3 4 data(){ 5 return{ 6 message: 'hello vue.js', 7 userinfo: { name: 'zs', age: 20 } 8 } 9 }
//子组件 <template> <div> <h3>Son 组件</h3> <p>message的值是: {{ msg }}</p> <p>user的值是: {{ user }}</p> </div> </template> props: ['msg', 'user']
子组件在父组件注册后,通过v-bind将data中所存储的数据绑定到<Son>中;
在子组件中通过props接收父组件绑定的值,再将其渲染,完成数据传输。
2.子组件向父组件传输数据:自定义事件
//子组件 Son export default { data() { return { count: 0, }; }, methods: { add() { this.count++; //修改数据时,通过 $emit() 触发自定义时间,把自增结果传给父组件 this.$emit("numchange", this.count); }, }, }
//父组件 <Son @numchange="getNewCount"></Son> export default { data() { return { countFromSon: 0, }; }, methods: { //获取子组件传递过来的数据 getNewCount(val) { this.countFromSon = val; }, }, };
先在父组件 <Son> 中绑定一个自定义事件 numchange ,并在事件中写一个方法 getNewCount ,该方法是为了接收所需传参数并将其赋值给指定数据;
在子组件中通过add()方法中的 $emit 触发自定义事件 numchange ,并向其传入实参即父组件想要向子组件所传递的参数 this.count,this.count即是形参val的实参,将其赋值给父组件中的 countFromSon
3.兄弟组件之间的传输数据:EventBus
//兄弟组件A import bus from './eventBus.js' export default { data() { return { str: "阿巴阿巴", }; }, methods: { sendMsg(){ //通过eventBus发送数据 bus.$emit("share", this.str); } }
//eventBus.js import Vue from 'vue' //向外共享Vue的实例对象 export default new Vue()
//兄弟组件B //1.导入 eventBus 模块 import bus from "./eventBus.js"; export default { data() { return { msgFromLeft: "", }; }, created() { //2.给bus绑定自定义事件 bus.$on("share", (val) => { this.msgFromLeft = val; }); }, };
1.初始化 EventBus 创建 eventBus.js,向外共享Vue实例对象,并在兄弟组件A和B中导入 eventBus.js
2.在作为数据发送方的 兄弟组件A 中,在 sendMsg 方法用$emit触发自定义事件share,将this.msg数据发送出去
3.在数据接收方 兄弟组件B ,通过给bus绑定自定义事件 share 接收数据并将其赋值给 msgFromLeft中