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