vue+antdesign模態框實現父子組件之間傳值

vue中實現父子組件間單向數據流傳遞比較方便，子組件經過prop接收父組件傳遞過來的值，父組件經過監聽子組件emit出的函數接收子組件傳遞的值。

一、父組件向子組件傳值（prop）

父組件先綁定值modalVisible，子組件經過prop接收modalVisible

父組件：

<template>
  <addModal :modalVisible="addModalVisible"></addModal>
</template>
<script>
export default {
    data () {
        return {
            //模態框
            addModalVisible: false,
        }
    },
}
</script>

子組件： 

<script>
export default {
    props: {
        modalVisible: Boolean
    },
}

每次父級組件發生更新時，子組件中全部的 prop 都將會刷新爲最新的值，可是若是在子組件內部改變 prop，Vue 會在瀏覽器的控制檯中發出警告：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "modalVisible"

在子組件中改變接收的prop值，vue文檔提供了兩種方式：https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

二、子組件向父組件傳值

子組件經過emit,發佈一個函數changeVisible，並攜帶false值，而後父組件監聽到changeVisible函數，再函數中接收到子組件傳遞的false這個值

子組件：

<template>
    <div>
        <a-modal
        :visible="modalVisible"
        @cancel="handleCancel"
        >
        </a-modal>
    </div>
</template>
<script>
export default {
    name: 'addModal',
    props: {
        modalVisible: Boolean
    },
    methods: {
        handleCancel(e) {
        this.$emit('changeVisible',false)
        },
    }
}

父組件：

<template>
    <a-button type="primary" @click="showModal">新建</a-button>
    <addModal :modalVisible="addModalVisible" 
        v-on:changeVisible="changeVisible"
    ></addModal>
</template>
<script>
export default {
    data () {
        return {
            //模態框
            addModalVisible: false,
        }
    },
    //模態框展現
    changeVisible (value) {
        this.addModalVisible = value;
    },
}

三、父子組件相互傳值

爲實現父子組件相互傳值，上述兩個方法能夠一塊兒綜合運用實現效果，可是vue中提供 修飾符sync ，以 update：propName 的模式觸發事件達到父子組件相互傳值,其中sync 會被擴展爲一個自動更新父組件屬性的 v-on 監聽器。以父組件向子組件傳遞title這一propName爲例：

子組件：

this.$emit('update:title', newTitle)

父組件： 

<text-document v-bind:title.sync="title"></text-document>
//sync修飾符會被擴展爲
<text-document v-bind:title="title" @update:title="val => title = newTitle"></text-document>

根據官網提供的父子組件值的雙向傳遞方法，結合antdesign 模態框API方法，父組件經過:modalVisible.sync="addModalVisible"向子組件傳遞visible狀態值，而子組件模態框關閉時會觸發cancel事件，在其定義的handleCancel函數中使用 this.$emit('update:modalVisible',false)的模式觸發事件向父組件傳值，實現模態框的顯示與隱藏。具體代碼以下：

父組件：

<template>
  <a-button type="primary" @click="showModal">新建</a-button>
  <addModal :modalVisible.sync="addModalVisible"></addModal>
</template>
<script>
import addModal from './addModal.vue'
export default {
    components: {
        addModal
    },
    data () {
        return {
            //模態框
            addModalVisible: false,
        }
    },
    //模態框展現
    showModal() {
        this.addModalVisible = !this.addModalVisible;
    },
}

子組件：

<template>
        <a-modal
        :visible="modalVisible"
        @cancel="handleCancel"
        >
        </a-modal>
</template>
<script>
export default {
    name: 'addModal',
    props: {
        modalVisible: Boolean
    },
    methods: {
        handleCancel(e) {
        this.$emit('update:modalVisible',false)
        },
    }
}