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

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

.sync 修饰符所提供的功能,当一个子组件改变了一个prop的值时,这个变化也会同步到父组件中所绑定,下面这篇文章主要给大家介绍了关于Vue中子组件向父组件传值以及.sync修饰符的相关资料,需要的朋友可以参考下

Vue中常见的组件通信方式可分为三类

父子通信

父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；
provide / inject；
$attrs/$listeners；

兄弟通信

Bus；
Vuex；

跨级通信

Bus；
Vuex；
provide / inject、
$attrs / $listeners、

在 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.js多页面开发环境搭建过程
利用 vue-cli 搭建的项目大都是单页面应用项目，对于简单的项目，单页面就能满足要求。这篇文章主要介绍了vue.js多页面开发环境搭建 ,需要的朋友可以参考下
2019-04-04
vue实现一个简单的Grid拖拽布局
这篇文章主要为大家详细介绍了如何利用vue实现一个简单的Grid拖拽布局,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
vue实现倒计时获取验证码效果
这篇文章主要为大家详细介绍了vue实现倒计时获取验证码效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
VUE PC端可拖动悬浮按钮的实现代码
这篇文章主要介绍了VUE PC端可拖动悬浮按钮的实现代码,通过实例代码介绍了父页面引用的方法,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
2024-02-02
Vue3父子通讯方式及Vue3插槽的使用方法详解
这篇文章主要介绍了Vue3父子通讯方式及Vue3插槽的使用方法详解,需要的朋友可以参考下
2023-01-01
vue自定义全局共用函数详解
今天小编就为大家分享一篇vue自定义全局共用函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue实现用户自定义字段显示数据的方法
今天小编就为大家分享一篇Vue实现用户自定义字段显示数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue日历/日程提醒/html5本地缓存功能
这篇文章主要介绍了vue日历/日程提醒/html5本地缓存功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
Vue实现返回顶部按钮实例代码
这篇文章主要给大家介绍了关于Vue实现返回顶部按钮的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
详解使用jest对vue项目进行单元测试
这篇文章主要介绍了详解使用jest对vue项目进行单元测试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09