Vue中 子组件向父组件传值 及 .sync 修饰符 详解

Posted 明天也要努力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中 子组件向父组件传值 及 .sync 修饰符 详解相关的知识,希望对你有一定的参考价值。

在 Vue 中,子父组件最常用的通信方式就是通过 props 进行数据传递,props 值只能在父组件中更新并传递给子组件。在子组件内部,是不允许改变传递进来的 props 值,这样做是为了保证数据单向流通。但有时候,我们会遇到一些场景,需要在子组件内部改变 props 属性值并更新到父组件中,这时就需要用到 .sync 修饰符

1. 之前的写法

子组件中可以通过 $emit 向父组件通信,通过这种间接的方式改变父组件的 data,从而实现改变子组件 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 的值传给子组件的,子组件中触发事件 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中父子组件的双向数据绑定

Vue中父子组件的双向数据绑定

子组件修改父组件props传的值

wepy父组件onload中请求数据,更新.sync动态传值绑定的数据,子组件onload中获取不到值。

wepy父组件onload中请求数据,更新.sync动态传值绑定的数据,子组件onload中获取不到值。

Vue中 事件总线(eventBus)详解及使用