vue入门学习篇——父子组件通信

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)
        }
    }
})

实现效果：