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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue前端柱狀圖實例(疊狀條形圖)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Element-Plus之el-col與el-row快速布局
el-col是el-row的子元素,下面這篇文章主要給大家介紹了關于Element-Plus之el-col與el-row快速布局的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
本篇文章主要介紹了基于Vue2x的圖片預覽插件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面實現(xiàn)方法
這篇文章主要給大家介紹了關于vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中關于confirm確認框的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
詳解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性。這篇文章主要介紹了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相關知識,需要的朋友可以參考下2018-10-10
過去在Vue2中,我們采用ref來獲取標簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關于如何通過一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點的相關資料,需要的朋友可以參考下2022-11-11
有時候我們需要播放 m3u8 格式的視頻,或者實現(xiàn)視頻播放器更多定制化需求,HTML 的 video 元素無法實現(xiàn)這些需求,這時候可以考慮使用 Video.js,本文給大家介紹了vue3使用video.js播放m3u8格式視頻的操作指南,需要的朋友可以參考下2024-07-07
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能,需要的朋友可以參考下2023-05-05
Vue.directive 實現(xiàn)元素scroll邏輯復用
這篇文章主要介紹了Vue.directive 實現(xiàn)元素scroll邏輯復用功能，文中給大家提到元素實現(xiàn)滾動的條件有兩個，具體內(nèi)容詳情大家參考下本文2019-11-11