vue入門學習篇——父子組件通訊

Vue父子組件之間通訊的原理

　　父組件：props down —— 父組件經過props向下傳遞數據給子組件

　　子組件：events up —— 子組件經過事件events向上傳遞數據給父組件

下面咱們來看一下具體的實現效果：

父組件 ==》子組件

一、首先在父組件上經過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>

二、而後子組件經過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傳給父組件
        }
    }
})

子組件 ==》父組件

一、父組件自定義一個事件方法，即delete

二、子組件經過$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)
        }
    }
})

實現效果：