vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)
更新時(shí)間：2019年11月05日 15:39:51 作者：不逗
這篇文章主要介紹了vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
$emit(update: prop, "newPropVulue") 這個(gè)模式，使子組件向父組件傳達(dá)：更新屬性，并拋出新的屬性值
.sync 修飾符 是父組件中修改prop值得修飾符
一：什么地方需要用到.sync修飾符呢
當(dāng)子傳父，父級(jí)有兩數(shù)據(jù)，而沒(méi)有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í)方法中的寫(xiě)法：
let updateListName = isFolder ? 'folderList' : 'fileList'
this.$emit(`update:${updateListName}`, list)
二：.sync與$emit的寫(xiě)法問(wèn)題
使用.sync修飾符,即
// this.$emit('update:folder-tree',100); //無(wú)效
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); // 無(wú)效
//......
<folderTree v-bind:father-num="test" v-on:update:folder-tree="test=$event" ></folderTree>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?element-ui表格內(nèi)嵌進(jìn)度條功能實(shí)現(xiàn)方法
Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui表格內(nèi)嵌進(jìn)度條功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue3.x中apollo的使用,通過(guò)前端自身直接獲取到apollo的配置目前看到官方支持的客戶(hù)端是沒(méi)有vue的，本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過(guò)程，需要的朋友可以參考下2023-02-02
vue-cli是什么及創(chuàng)建vue-cli項(xiàng)目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化項(xiàng)目的工具，支持創(chuàng)建vue2和vue3的項(xiàng)目，本文給大家詳細(xì)講解vue-cli是什么及創(chuàng)建vue-cli項(xiàng)目的方法，感興趣的朋友跟隨小編一起看看吧2023-04-04
echarts 使用formatter 修改鼠標(biāo)懸浮事件信息操作
這篇文章主要介紹了echarts 使用formatter 修改鼠標(biāo)懸浮事件信息操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue.js 是一款流行的前端框架,它提供了一些方便的機(jī)制來(lái)管理組件之間的通信,其中包括組件傳值,本文將詳細(xì)介紹 Vue.js 中的組件傳值機(jī)制,包括父子組件傳值、兄弟組件傳值、跨級(jí)組件傳值等多種方式,需要的朋友可以參考下2023-08-08
ElementUI?select彈窗在特定場(chǎng)合錯(cuò)位問(wèn)題解決方案
這篇文章主要介紹了ElementUI?select彈窗在特定場(chǎng)合錯(cuò)位問(wèn)題解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了Vue中封裝eCharts組件及優(yōu)化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了OpenDataV低代碼平臺(tái)新增組件流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了Node.js+Vue腳手架環(huán)境搭建的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
vue.js評(píng)論發(fā)布信息可插入QQ表情功能
這篇文章主要為大家詳細(xì)介紹了vue.js評(píng)論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08