首先看到 .sync 我們需要知道這是個修飾器 類似修飾器還有 .stop .prevent 之類
其實這個修飾符就是vue封裝了 子組件要修改父組件傳過來的動態(tài)值的語法糖,省去了父組件需要寫的方法,但是子組件emit時要加上update
在有些情況下,我們可能需要對一個 prop 進(jìn)行“雙向綁定”。不幸的是,真正的雙向綁定會帶來維護(hù)上的問題,因為子組件可以修改父組件,且在父組件和子組件都沒有明顯的改動來源
代碼解釋
// 這里父組件,要給子組件傳一個title的值
<template>
<div>
<t-title :title.sync="fatherTitle"></t-title>
</div>
</template>
<script>
import tTitle from './blocks/list';
export default {
name: 'test1',
components: { tTitle },
data() {
return {
fatherTitle: '父組件給的標(biāo)題'
};
},
}
</script>
// 子組件
<template>
<div>
<h3>{{ title }}</h3>
<button @click="changeTitle">改變</button>
</div>
</template>
<script>
export default {
props:{
title: {type: String, default: '默認(rèn)值11'}
},
methods: {
changeTitle() {
this.$emit("update:title", "子組件要改自己的標(biāo)題");
}
}
};
</script>
這里關(guān)鍵就是emit里的參數(shù)要寫成'update'+ ':' +'要修改的props'
以前是用的this.$emit("自定義方法")
更多關(guān)于“前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗,課程大綱更科學(xué)更專業(yè),有針對零基礎(chǔ)的就業(yè)班,有針對想提升技術(shù)的好程序員班,高品質(zhì)課程助力你實現(xiàn)程序員夢想。