- 所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:父級 prop 的更新會向下流動到子組件中,但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態,從而導致你的應用的數據流向難以理解。
2.實例應用,比如自定義彈窗
主頁:(父組件) 注意 .sync
<custom-dialog :visible.sync="dialogVisible"></custom-dialog>
export default {
name: '',
data() {
return {
dialogVisible: false
}
}
}
custom-dialog組件:(子組件)
<div>
<button @click="onHide()">關閉</button>
</div>
export default {
props: {
visible: {
type: Boolean,
default: () => false
}
},
methods: {
onHide() {
this.$emit('update:visible', false);
}
}
}
參考:ElemeFE/element.