快捷導航

Vue中子組件向父組件傳值以及.sync修飾符詳析

更新時間：2022年11月14日 11:07:27 作者：明天也要努力

.sync?修飾符所提供的功能,當一個子組件改變了一個prop的值時,這個變化也會同步到父組件中所綁定,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件向父組件傳值以及.sync修飾符的相關(guān)資料,需要的朋友可以參考下

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>

總結(jié)：

父組件將 message 的值傳給子組件的，子組件中觸發(fā)事件 update:xxx 需要修改父組件的 message，就可以用 .sync 修飾符簡化( sync 操作符的時候子組件 emit 必須是 ‘update:xxx’ 名字)：

<child-cop :xxx.sync="message"></child-cop>

.sync 修飾符其實就是將上述代碼轉(zhuǎn)換成

<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>

點擊按鈕后效果