Vue中子組件向父組件傳值以及.sync修飾符詳析
- 傳送門:Vue中 狀態(tài)管理器(vuex)詳解及應用場景
- 傳送門:Vue中 $ attrs、$ listeners 詳解及使用
- 傳送門:Vue中 事件總線(eventBus)詳解及使用
- 傳送門:Vue中 provide、inject 詳解及使用
Vue中 常見的組件通信方式可分為三類
父子通信
父向子傳遞數(shù)據(jù)是通過 props,子向父是通過 events($emit);
通過父鏈 / 子鏈也可以通信($parent / $children);
ref 也可以訪問組件實例;
provide / inject;
$attrs/$listeners;
兄弟通信
Bus;
Vuex;
跨級通信
Bus;
Vuex;
provide / inject、
$attrs / $listeners、
在 Vue 中,子父組件最常用的通信方式就是通過 props 進行數(shù)據(jù)傳遞,props 值只能在父組件中更新并傳遞給子組件。在子組件內(nèi)部,是不允許改變傳遞進來的 props 值,這樣做是為了保證數(shù)據(jù)單向流通。但有時候,我們會遇到一些場景,需要在子組件內(nèi)部改變 props 屬性值并更新到父組件中,這時就需要用到 .sync 修飾符。
1. 之前的寫法
子組件中可以通過 $emit 向父組件通信,通過這種間接的方式改變父組件的 data,從而實現(xiàn)改變子組件 props 的值
父組件
<template> <div> <Child :title="childTitle" @changeTitle="CTitle" :subTitle="childSubTitle" @update:subTitle="val => childSubTitle = val"> </Child> </div> </template> <script> import Child from './child.vue' export default { data() { return { childTitle:'hello world', childSubTitle:'你好', } }, components:{ Child }, methods: { CTitle(msg){ this.childTitle = msg; }, }, } </script>
子組件
<template> <div class="child"> <h2>{{title}}</h2> <h4>{{subTitle}}</h4> <button @click="changeTitle">改變英文標題</button> <button @click="changeSubTitle">改變中文標題</button> </div> </template> <script> export default { data() { return { newTitle:'Vue', newSubTitle:'明天也要努力' }; }, props: { title:{ type:String, default:'', }, subTitle:{ type:String, default:'', } }, methods:{ changeTitle(){ this.$emit('changeTitle',this.newTitle) }, changeSubTitle(){ this.$emit('update:subTitle',this.newSubTitle) }, }, }; </script>
2. .sync 修飾符
為了方便這種寫法,vue 提供了.sync 修飾符,說白了就是一種簡寫的方式,我們可以將其當作是一種語法糖,比如 v-on: click 可以簡寫為 @click。
而上邊父組件的這種寫法,換成 sync 的方式就像下邊這樣:
父組件
<template> <div> <h1>父組件:{{childSubTitle}}</h1> <Child :subTitle.sync="childSubTitle"></Child> </div> </template> <script> import Child from './child.vue' export default { data() { return { childSubTitle:'你好', } }, components:{ Child }, } </script>
子組件
<template> <div class="child"> <h4>{{subTitle}}</h4> <button @click="changeSubTitle">改變中文標題</button> </div> </template> <script> export default { data() { return { newSubTitle:'明天也要努力' }; }, props: { subTitle:{ type:String, default:'', } }, methods:{ changeSubTitle(){ this.$emit('update:subTitle',this.newSubTitle) }, }, }; </script>
總結:
父組件將 message 的值傳給子組件的,子組件中觸發(fā)事件 update:xxx 需要修改父組件的 message,就可以用 .sync 修飾符簡化( sync 操作符的時候子組件 emit 必須是 ‘update:xxx’ 名字):
<child-cop :xxx.sync="message"></child-cop>
.sync 修飾符其實就是將上述代碼轉換成
<child-cop :xxx="message" @update:xxx="message = $event"></child-cop>
注意:
父組件
<template> <div> <h1>父組件:{{doc.title}}--{{doc.content}}</h1> <Child v-bind.sync="doc"></Child> </div> </template> <script> import Child from './child.vue' export default { data() { return { doc:{ title:'前端', content:'Vue', }, } }, components:{ Child }, } </script>
子組件
<template> <div class="child"> <h4>{{title}}--{{content}}</h4> <button @click="change">改變</button> </div> </template> <script> export default { data() { return { newTitle:'明天也要努力' }; }, props: { title:{ type:String, default:'', }, content:{ type:String, default:'', } }, methods:{ change(){ this.$emit('update:title',this.newTitle); this.$emit('update:content','Vue中 子組件向父組件傳值 及 .sync 修飾符 詳解'); }, }, }; </script>
點擊按鈕后 效果
總結
到此這篇關于Vue中子組件向父組件傳值以及.sync修飾符的文章就介紹到這了,更多相關Vue子組件向父組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
VUE?el-table列表搜索功能純前端實現(xiàn)方法
Vue表搜索是指在Vue應用中實現(xiàn)對表格數(shù)據(jù)的搜索功能,下面這篇文章主要給大家介紹了關于VUE?el-table列表搜索功能純前端實現(xiàn)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
在前端開發(fā)中,尤其是利用Vue3構建現(xiàn)代Web應用時,掌握如何使用本地存儲(localStorage)來保存數(shù)據(jù)是非常重要的能力,在這篇博客中,我將詳細介紹如何在Vue3中使用localStorage保存數(shù)據(jù),并提供示例代碼來幫助理解,需要的朋友可以參考下2024-06-06Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊思路詳解
這篇文章主要介紹了Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊,實現(xiàn)思路大概是通過加一個本地緩存的時間戳,通過時間戳計算指定時間內(nèi)不能點擊按鈕,具體實現(xiàn)代碼跟隨小編一起看看吧2023-12-12vue2.0+elementui實現(xiàn)一個上門取件時間組件
這篇文章主要給大家介紹了關于vue2.0+elementui實現(xiàn)一個上門取件時間組件的相關資料,用于預約上門服務時間 看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個簡單的,需要的朋友可以參考下2024-02-02利用Vue實現(xiàn)一個markdown編輯器實例代碼
這篇文章主要給大家介紹了關于如何利用Vue實現(xiàn)一個markdown編輯器的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-05-05