vue+antdesign模態框實現父子元件之間傳值
vue中實現父子元件間單向資料流傳遞比較方便，子元件通過prop接收父元件傳遞過來的值，父元件通過監聽子元件emit出的函式接收子元件傳遞的值。
1、父元件向子元件傳值（prop）
父元件先繫結值modalVisible，子元件通過prop接收modalVisible
父元件：
<template> <addModal :modalVisible="addModalVisible"></addModal> </template> <script> export default { data () { return { //模態框 addModalVisible: false, } }, }
子元件：
<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
2、子元件向父元件傳值
子元件通過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;
},
}
3、父子元件相互傳值
為實現父子元件相互傳值，上訴兩個方法可以一起綜合運用實現效果，但是vue中提供 修飾符sync 以 update：propName 的模式觸發事件,sync 會被擴充套件為一個自動更新父元件屬性的 v-on 監聽器。
子元件：
this.$emit('update:title', newTitle)父元件：
<text-document v-bind:title.sync="title"></text-document>
//會被擴充套件為
<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)
},
}
}