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