Vue父子组件之间通信的原理
父组件：props down —— 父组件通过props向下传递数据给子组件
子组件：events up —— 子组件通过事件events向上传递数据给父组件
下面我们来看一下具体的实现效果：
父组件 ==》子组件
1、首先在父组件上通过v-bind设置属性传值例如key、item、index
<div id="root"> <input v-model="inputValue" /> <button @click="butClick">submit</button> <ul>
//在父组件定义属性传值 <list-item v-for="(item,index) of list" :key="index" :item="item" :index="index" @delete="liDelete"//父组件自定义事件delect ></list-item> </ul> </div>
2、然后子组件通过props接收属性，属性值可以在子组件中任意使用
//这里定义一个全局组件，就不单独写一个.vue文件了
Vue.component(‘list-item‘,{
//子组件通过props接收 props:[‘item‘,‘index‘], template:‘<li>{{item}} <button @click="liClick">删除</button></li>‘, methods:{ liClick:function(){ this.$emit(‘delete‘,this.index)//子组件通过$emit触发delete事件，把当前的index传给父组件 } } })
子组件 ==》父组件
1、父组件自定义一个事件方法，即delete
2、子组件通过$emit触发delete事件，把当前的index传给父组件
new Vue({ //绑定元素 el:‘#root‘, //数据 data:{ inputValue:‘‘, list:[] }, methods:{ butClick:function(){ if(this.inputValue !==‘‘){ this.list.push(this.inputValue) } this.inputValue = ‘‘; }, liDelete:function(index){ this.list.splice(index,1) } } })
实现效果：
原文：https://www.cnblogs.com/hess/p/10877185.html