$emit(update: prop, "newPropVulue") 這個(gè)模式，使子組件向父組件傳達(dá)：更新屬性，并拋出新的屬性值
.sync 修飾符 是父組件中修改prop值得修飾符

10年積累的成都做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有巴宜免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

一：什么地方需要用到.sync修飾符呢

當(dāng)子傳父，父級(jí)有兩數(shù)據(jù)，而沒有v-modal時(shí)

例如iview的Tree組件中：

父級(jí)：

<folder-tree
 :folder-list.sync="folderList"
 :file-list.sync="fileList"
 :folder-drop="folderDrop"
 :file-drop="fileDrop"
 :beforDelete="beforeDelete"
/>
import FolderTree from '_c/folder-tree'
export default {
 components: {
  FolderTree
 },
 }

子級(jí)：

<Tree :data="folderTree" :render="renderFunc"></Tree>

子級(jí)方法中的寫法：

 let updateListName = isFolder ? 'folderList' : 'fileList'
 this.$emit(`update:${updateListName}`, list)

二：.sync與$emit的寫法問題

使用.sync修飾符,即

// this.$emit('update:folder-tree',100); //無效
this.$emit('update:folderTree',100); //有效
//......
<folder-tree v-bind:folder-tree.sync="test"></folder-tree>

與不使用.sync，即

this.$emit('update:folder-tree',100); //有效
//this.$emit('update:folderTree',100); // 無效
 
 //......
 <folderTree v-bind:father-num="test" v-on:update:folder-tree="test=$event" ></folderTree>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁標(biāo)題：vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)
文章起源：http://jinyejixie.com/article36/ggihpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、靜態(tài)網(wǎng)站、小程序開發(fā)、自適應(yīng)網(wǎng)站、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)