vue子傳父關(guān)于.sync與$emit的實現(xiàn)
更新時間：2019年11月05日 15:39:51 作者：不逗
這篇文章主要介紹了vue子傳父關(guān)于.sync與$emit的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
$emit(update: prop, "newPropVulue") 這個模式，使子組件向父組件傳達(dá)：更新屬性，并拋出新的屬性值
.sync 修飾符 是父組件中修改prop值得修飾符
一：什么地方需要用到.sync修飾符呢
當(dāng)子傳父，父級有兩數(shù)據(jù)，而沒有v-modal時
例如iview的Tree組件中：
父級：
<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
},
}
子級：
<Tree :data="folderTree" :render="renderFunc"></Tree>
子級方法中的寫法：
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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue elementUI table 自定義表頭和行合并的實例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實例代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了vue3.2?Composition?API項目依賴升級示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
組件是 vue.js最強(qiáng)大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。這篇文章主要介紹了一文快速詳解前端框架 Vue 最強(qiáng)大的功能,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了Vue3的響應(yīng)式原理解析，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了Vue關(guān)于訪問外鏈?zhǔn)〉膯栴}，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要給大家介紹了關(guān)于利用vue-i18n實現(xiàn)多語言切換效果的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue-i18n具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue 3.0 前瞻Vue Function API新特性體驗
這篇文章主要介紹了Vue 3.0 前瞻Vue Function API新特性體驗，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要給大家分享了 Vue中插槽slot的使用方法，下面文章內(nèi)容圍繞插槽slot的相關(guān)資料展開其的使用方法,需要的朋友可以參考一下，希望多大家有所幫助2021-11-11
解決vite.config.js無法使用__dirname的問題
這篇文章主要介紹了解決vite.config.js無法使用__dirname的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了淺談vue生命周期共有幾個階段？分別是什么？具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08