[vue] props傳值,子組件直接改變父組件的值

  1. 所有的 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.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章