vue 父子元件通訊

weixin_34377065發表於2018-12-24
Vue元件

元件目錄結構

parent child

API： $emit、 $on、 $refs、 props

1、父子元件通訊

需求合理性我們先不考慮，demo就為了搞清怎麼通訊，我們要求： 1、父元件傳值給子元件，同時父元件input輸入框value也可同步到子元件 2、點選子元件加減子元件數字跟隨變動， 父元件input value跟隨變動，

父元件
<template>
<div>
    <input type="text" v-model="count">
    <add-child :count="count" ref='addChild' @childAdd="add"   @childReduce="reduce"></add-child>
</div>
    
</template>
<script>
import addChild from '@/components/add'
export default {
    data(){
        return {
            count: 0
        }
    },
    methods:{
        add(count){
            this.count = count
        },
        reduce(count){
            this.count = count
        }
    },
    watch: {
        count (val) {
           return this.count = Number(val)
        }
    },
    components:{
        addChild
    }
}
</script>
複製程式碼
子元件
<template>
<div>
    <span class="button" @click="add">+</span>
    <span class="button" @click="reduce">-</span>
</div>
    
</template>

<script>
export default {
    props:{
        count:{
            //約定資料型別
            type: Number,
              //預設值
            default: 0
        }
    },
    methods:{
        add(){
            this.$emit('childAdd',this.count + 1)
        },
        reduce(){
            this.$emit('childReduce', this.count - 1)
        },
        
    }
}
</script>
複製程式碼
父元件引入子元件
import addChild from '@/components/add'
複製程式碼
父子件註冊子元件
//並在父元件內註冊子元件
components:{
    addChild
}
複製程式碼
父元件html
// v-bind:count="count" 父元件傳遞值給子元件，v-on:add="add"監聽子元件 (用v-bind和v-on有助於更好的理解，熟悉了我們可以簡化)
    <!-- <add-child v-bind:count="count" ref='addChild' v-on:toast="toast" v-on:parentAdd="add"   v-on:parentReduce="reduce"></add-child> -->
    <add-child :count="count" @add="childAdd"  @reduce="childReduce"></add-child>
複製程式碼
子元件接收父元件傳遞的值
props:{
        count:{
            //約定資料型別
            type: Number,
              //預設值
            default: 0
        }
    }

接收父元件傳遞的值count
複製程式碼
傳送事件
 methods:{
        add(){
            this.$emit('childAdd',this.count + 1)
        },
        reduce(){
            this.$emit('childReduce', this.count - 1)
        }
    }

//父元件監聽子元件指令childAdd、childReduce 並觸發父元件方法add、reduce
複製程式碼
以上父元件穿值給子元件，子元件觸發事件給父元件搞定，總結一下，父元件v-bind:count="count"穿值給子元件，子元件props：接收（props接收的父元件的值相當於子元件內定義data只不過不能直接修改疑問可搜尋子元件為什麼不能直接修改父元件值），繼續，子元件定義方法並執行emit指令定義指令名字“childAdd、childReduce”，當子元件觸發add、reduce方法觸發emit併發指令給父元件，父元件v-on:childAdd（簡寫@childAdd） 監聽並觸發父元件方法，如下圖

接下來我們再用$on,監聽指令不在dom內，直接寫在js中 上圖

標註忽略了 child元件ref="addChild" 和普通獲取操作dom一樣

我們再看看console this.refs

這樣我們就可以做到和dom內監聽子元件一樣的效果

當然這樣寫感覺噁心了不少，不過我是為了引出父元件直接操作子元件方法做個引子

給父元件加一個功能可以改變子元件顯示值（還是那句話不管合不合理我們只看怎麼實現）

同樣還是用ref來獲取子元件，這樣可以直接觸發子元件方法。

ok父子元件通訊算是說完了， 預告：明天繼續 兄弟元件通訊

相關文章