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

目录
  • Vue中 常见的组件通信方式可分为三类
  • 1. 之前的写法
  • 2. .sync 修饰符
  • 总结
  • 传送门:Vue中 状态管理器(vuex)详解及应用场景
  • 传送门:Vue中 $ attrs、$ listeners 详解及使用
  • 传送门:Vue中 事件总线(eventBus)详解及使用
  • 传送门:Vue中 provide、inject 详解及使用

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子组件向父组件传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue组件传值的11种方式总结

    目录 1.父组件传给子组件 2.子组件传给父组件 3.兄弟组件间传值 4.路由间传值 i.使用问号传值 5.使用$ref传值 6.使用依赖注入传给后代子孙曾孙 7.祖传孙 $attrs 8.孙传祖 9.$parent 10.sessionStorage传值 11.vuex 总结 不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件 在子组件里定义一个props,即props:[‘msg’],msg可以是

  • Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)

    目录 子组件使用this.$emit()向父组件传值 第一步 在父组件中引入子组件 第二步 子组件向父组件传值 子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <indexImport

  • Vue组件间传值的实现解析

    目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/children 7. provide/inject 8. $attrs/$listeners 9. v-model绑定到自定义组件中 10. sync同步动态属性数据 11. localStorage / sessionStorage 1. 父组件向子组件传值 1.1 描述 父组件以属性的形式绑定值到子组件身上.

  • 通过实例讲解vue组件之间的传值

    目录 前言 1.父组件向子组件进行传值 2.子组件向父组件进行传值 3.非父子组件之间的传值 总结 前言 目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和页面数据展示,父组件渲染需要子组件通知更新父组件的state,父子组件之间的传值一般有三种方法: 父传子 子传父 非父子传值 注意: 父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 接下来,我们会通过实例代码来看的更清晰,理解更容易

  • Vue组件之间传值/调用几种方式

    目录 组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props (二)子组件向父组件传值==$emit,也可以用来调用父组件中的方法 (三)可以通过 p a r e n t 和 parent和 parent和children获取父子组件参数 (四)兄弟之间传值===Vuex (五)父组件调用子组件的方法===ref 推荐 组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="

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

    目录 Vue中 常见的组件通信方式可分为三类 1. 之前的写法 2. .sync 修饰符 总结 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中 常见的组件通信方式可分为三类 父子通信 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($p

  • Vue.sync修饰符与$emit(update:xxx)详解

    目录 Vue .sync修饰符与$emit(update:xxx) .sync修饰符的作用 .sync修饰符之前的写法 使用.sync修饰符的写法 Vue .sync修饰符与$emit(update:xxx) .sync修饰符的作用 在对一个 prop 进行“双向绑定,单向修改”的场景下,因为子组件不能直接修改父组件,sync在2.3版本引入,作为一个事件绑定语法糖,利用EventBus,当子组件触发事件时,父组件会响应事件并实现数据更新,避免了子组件直接修改父组件传过来的内容. .sync修饰

  • vue中v-model指令与.sync修饰符的区别详解

    目录 v-model .sync 细微之处的区别 总结功能作用场景: v-model <!--父组件--> <template> <!--v-model 指令是语法糖--> <Child v-model="model"></Child> <!-- 把 v-model 指令展开后相当于下面的代码 --> <!-- v-model绑定的默认事件是input,默认prop是value属性 --> <Ch

  • vue 子组件向父组件传值方法

    子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子

  • vue 父组件给子组件传值子组件给父组件传值的实例代码

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{title}}</h2> //title必须是父组件传递的 </template> <script> export default (){ props:["title"] //可以是数组,也可以是对象 //如何对title进行校验 //props:{ // t

  • vue中子组件向父组件传递数据的实例代码(实现加减功能)

    这里讲解一下子组件向父组件传递值的常用方式. 这里通过一个加减法的实例向大家说明一下,这个的原理. 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值是减一变成 0 具体代码我直接贴出来,刚出炉的代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

  • vue 组件间的通信之子组件向父组件传值的方式

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就

  • VUE子组件向父组件传值详解(含传多值及添加额外参数场景)

    一.子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChang

  • vue 子组件和父组件传值的示例

    一.子组件向父组件传值 1:子组件中(例:) 2:父组件中(例:) 二.父组件向子组件传值 1:父组件中(例:) 2:子组件中(例:) 以上就是vue 子组件和父组件传值的示例的详细内容,更多关于vue 子组件和父组件传值的资料请关注我们其它相关文章!

随机推荐