VUE中组件传值

目录

父组件 —> 子组件子组件 —> 父组件兄弟组件

父组件 —> 子组件

(1)父传值v-bind 父组件通过v-bind:data="data"传值，简写等同于:data="data"将数据传递给引用的子组件

(2)子接收props 子组件通过props接收父组件传的值

props: { data: { type: Object, //接收的数据类型 required: true //是否一定要接收 } }, //简单写法 props: ['data']

props是单向绑定的，子组件不可以修改父组件的值，在子组件中修改props中的值会报错，想修改父组件传过来的值可以先拷贝出一个副本，改变副本的值

(3)使用 在子组件中即可以直接使用{{this.data}}使用

子组件 —> 父组件

法一：通过$emit触发事件进行传值 (1)子触发事件

methods: { deleteTodo(){ this.$emit('del',this.todo.id) //触发一个名为'del'的事件，传递参数为this.todo.id } },

(2)父监听事件 v-on: del="deleteTodo"简写@del="deleteTodo"

<Item @del="deleteTodo"></Item> //监听del事件，处理函数为deleteTodo，此函数第一个参数为子组件$emit抛出来的参数this.todo.id

(3)使用

deleteTodo(id){ //...利用子组件传来的id来处理一些事件 },

法二：通过v-model双向绑定

兄弟组件

法一：通过父组件中转 (1)子1通过$emit传值给父

(2)父再通过v-bind传值给子2

法二：借助bus中央事件总线 bus(一个空的vue对象)作为介质，辅助兄弟组件的传值

(1)新建Bus.js文件夹来new一个VUE空对象

import Vue from 'vue' export default new Vue()

(2)子1通过bus.$emit触发事件传值

//引入bus import bus from ... methods: { foo(){ bus.$emit('send',vaule) } }

(3)子2通过bus.$on监听事件获取值

//引入bus import bus from ... //在created钩子内使用 //如果在mounted使用，它可能接受不到其他组件来自created钩子发出的事件 created() { bus.$on('send',function); //第二个参数为函数，可以在函数里对子传过来的值进行绑定使用 } //使用$bus.off解除，因为组件销毁后，就没必要把监听的句柄储存在vue-bus里了 beforedestroy() { bus.$off('send',function); }