Vue中的父子組件傳值.sync
更新時(shí)間：2023年12月20日 16:36:28 作者：小晨想好好學(xué)習(xí)
這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue父子組件傳值.sync
傳統(tǒng)的父子組件之間傳值
父組件通過(guò) :變量=“xxx”將值傳給子組件
子組件通過(guò)props進(jìn)行接收
但是子組件只有讀的屬性，不可以對(duì)數(shù)據(jù)進(jìn)行更改，所以$emit傳回父組件，由父組件對(duì)數(shù)據(jù)進(jìn)行修改
//父組件
<template>
<div class="content">
<btn :btnName='num' @changeFn= changeFn></btn>
</div>
</template>
子組件
export default {
name: 'btn',
props: {
btnName:{
type : [String,Number],
required: true
}
},
methods: {
changeNum(){
this.$emit('changeFn',888)
}
},
}
.sync相當(dāng)于上面的父子組件傳值簡(jiǎn)寫(xiě)
父子雙向傳值語(yǔ)法糖
父組件在傳入子組件的數(shù)據(jù)后加上.sync 不需要在對(duì)子組件的$emit進(jìn)行接收
<template>
<div class="content">
<btn :btnName.sync='num' ></btn>
</div>
</template>
子組件$emit傳回的不再是函數(shù) 而是 update:父組件傳過(guò)來(lái)的變量名稱
<script>
export default {
name: 'btn',
props: {
btnName:{
type : [String,Number],
required: true
}
},
methods: {
changeNum(){
this.$emit('update:btnName',888)
}
},
}
</script>
總的來(lái)說(shuō)
.sync 使得父組件少走了處理 $emit的那一步
好了，以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例
本篇文章主要介紹vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要介紹了vue3動(dòng)態(tài)添加路由,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
最近公司項(xiàng)目有個(gè)導(dǎo)出ppt的功能,在使用ppexgen.js一周完成功能之后,這篇文章主要給大家介紹了關(guān)于前端vue如何使用pptxgen.js導(dǎo)出PPT的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了實(shí)現(xiàn)vue圖片縮放方式-拖拽組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)（用指令實(shí)現(xiàn)）
本篇文章主要介紹了詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)（用指令實(shí)現(xiàn)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法分析
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法,結(jié)合實(shí)例形式分析了vue.js針對(duì)導(dǎo)航隱藏與顯示的路由配置、事件監(jiān)聽(tīng)等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
Vue3.x 自發(fā)布以來(lái),憑借其性能的顯著提升和更加靈活的組合式 API,已經(jīng)成為了現(xiàn)代前端開(kāi)發(fā)的重要工具之一,除了基本用法外,Vue3.x 還提供了許多高級(jí)功能,本文將和大家一起深入探索Vue3.x中的七大高級(jí)用法,需要的朋友可以參考下2024-03-03
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-08-08
vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例
今天小編就為大家分享一篇vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue CLI3中使用compass normalize的方法
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05