Vue props 雙向資料繫結方法

Msevensun發表於2017-06-07
Vue

眾所周知vue2中，把prop資料繫結的.sync去掉了，官方給出的原因是它會破壞「單向資料流」的假設，後來可能因為.sync在實際工作確實有用也很方便，vue2.3+ 又加上去了，不過實現機制稍有變化，詳情請移步vue

在這裡說下在去掉.sync的版本中如何給props資料繫結
在這裡先說下我遇到的情景，父元件中有個按鈕 parent.vue，子元件中是個彈窗 child.vue。
父元件中彈窗值預設為false,當點選父元件中的按鈕時 按鈕值為true且傳給子元件的彈窗值為true，此時彈出子元件中的彈窗，當關閉彈窗時 彈窗值為false,且false傳回給父元件。這也是常說的父子元件之間的通訊，方法有很多，我這裡說一種，使用Vue版本為2.1.8。
請看程式碼：

parent.vue

<template>
    <div>
        <button @click="showDialog"></button>
        <show-dialog 
            :isDialogVisible= "isDialogVisible"     //動態繫結父元件的資料到子模板的props,當父元件的資料發生變化，改變化也會傳給子元件
            @getDialogVisible="setDialogVisible"  //監聽子元件中$emit的變化
        >
        </show-dialog>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                isDialogVisible: false   //初始化值
            }
        },
        methods:{
            showDialog(){
                this.isDialogVisible = true;  //點選button時，設值為true，觸發動態繫結的:isDialogVisible
            },
            setDialogVisible(val){
                this.isDialogVisible = val;
            }
        }
    }
</script>

child.vue

<template>
    <div>
        <!--此處使用餓了麼UI元件 版本1.2.9-->
        <el-dialog
            v-model="isDialogVisible"
        >
        </el-dialog>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                isDialogVisible: this.isDialogVisible  //把props的值賦給isDialogVisible
            }
        },
        props:[
            `isDialogVisible`    //接收父元件傳的值，來控制彈窗顯示和隱藏
        ],
        watch:{
            //監聽isDialogVisible變更後對外傳送事件通知，比如關閉彈窗時值變為false,通過$emit通知父元件的getDialogVisible，根據setDialogVisible方法去設定父元件的值
            isDialogVisible(val){
                this.$emit(`getDialogVisible`, val)
            }
        }
    }
</script>```

大致就是這樣可以實現父子和子父元件之間的傳值

相關文章