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修饰符之前的写法

父组件：

<parent :myMessage=“bar” @update:myMessage=“func”>

js定义函数:

func（val）{
	this.bar = val;
}

子组件，事件触发函数：

func2(){
	this.$emit(‘update:myMessage',valc);
}

也就是说，父组件需要传一个绑定值（myMessage）同时需要设置一个更新触发函数（func）给子组件修改绑定值的时候调用。

使用.sync修饰符的写法

会简化上面的写法，父组件不需要定义更新触发函数。

父组件：

<comp :myMessage.sync="bar"></comp>

子组件：

this.$emit('update:myMessage',valc);

sync 修饰符与 $emit(update:xxx) ，驼峰法 和 - 写法的区别，使用.sync修饰符，即变量应该使用驼峰法：

    // this.$emit('update:father-num',100);  //无效
    this.$emit('update:fatherNum',100); //有效
    //......
    <father v-bind:father-num.sync="test"></father>

不适用 .sync 修饰符，变量应该使用 - ，即father-num

this.$emit('update:father-num',100);  //有效
//this.$emit('update:fatherNum',100); // 无效
//......
<father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>

但从实践中发现，用 .sync 修饰符，这两种写法都是有效的。

在vue之中，当父组件向子组件传递属性的时候，如下使用驼峰法

<cpn :cMives="movies"></cpn>

在子组件中props:[‘cMives’],是接收不到属性的，应该使用-来绑定属性，接收依旧使用驼峰法。

 <cpn :c-mives="movies"></cpn>

综上，绑定时候用 “-”，接收和使用的时候用驼峰法，如果真的无效，再试试上面所说的那种情况。

到此这篇关于Vue.sync修饰符与$emit(update:xxx)的文章就介绍到这了,更多相关Vue.sync修饰符内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中的.sync修饰符用法及原理分析

    目录 .sync修饰符用法及原理 例如 .sync修饰符的用法总结 需求描述 解决方案 .sync修饰符用法及原理 vue中我们经常会用v-bind(缩写为:)给子组件传入参数. 或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态. 例如 //父组件给子组件传入一个函数  <MyFooter :age="age" @setAge="(res)=> age = res">  </MyFooter>  //子组件通过

  • Vue中$on和$emit的实现原理分析

    目录 Vue中发布订阅模式 $emit和$on用法深挖 首先剖析一下$on的原理实现 有一点要记住先定义的先触发 分析$emit 先打个断点 Vue中发布订阅模式 在Vue中采用了发布订阅模式,典型的兄弟组件间的通信$on和$emit 发布订阅模式:(订阅者.发布者.信号中心) 一个发布者$emit发布一个事件到信号中心 eventBus ,订阅者们 $on 通过信号中心收到该事件,进行处理 在这里模拟一个自定义事件 $on和$emit事件 class EventBus{ constructor

  • 关于vue.js中this.$emit的理解使用

    关于vue.js中this.$emit的理解使用

    目录 一.每个 Vue 实例都实现了事件接口 二.注意事项 三.例子及说明 四.总说明 一.每个 Vue 实例都实现了事件接口 即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName, optionalPayload) 触发事件 二.注意事项 1.父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 2.不能用 $on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定 三.例子及说明 1.父组件代码及说明 <template>

  • Vue $emit()不能触发父组件方法的原因及解决

    $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名 如果修改后还是不行的话,就改用: this.$parent.Event (Event为父组件中的自定义方法) 补充知识:Vue.js 使用 $emit 触发事件填坑 vue的组件内触发外部事件不起作用 vue的组件内触发自定义事件(发外部事件)不起作用 今天学习vue的自定义组件功能,在组件内部触发一个事件,在使用组件的地方使用v-on绑定这个事件,然而触发一直不生效,检查了很多遍的代码都没看出什么问题,代码如下: <div id

  • vue 组件之间事件触发($emit)与event Bus($on)的用法说明

    组件之间事件触发 之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导.目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变.废话不多说.上图看看组件情况. 新增按钮组件: 操作按钮组合组件: 此时有个需求就是,无论是哪个按钮,如果改变了列表中的数据,列表需要实时更新数据. 此时就需要用到组件间的事件触发. 父子组件之间事件触发可以使用$emit $emit的使用方法如下: 在子组件中,写一个click点击事件.比如: cancel

  • vue中$emit的用法详解

    vue中$emit的用法详解

    目录 vue2.x vue3.x 子组件 父组件 vue2.x 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit,让父组件监听到自定义事件 . vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:

  • 详解Vue的sync修饰符

    详解Vue的sync修饰符

    1 .指令 指令即 Directive,从字面意思理解就是我告诉你要做什么,就是发送了一个指令,然后由接收指令的人去做就好了.在 Vue 中的指令有个统一好认的格式,就是以 v- 开头的就是指令,如: <div v-text="x"> </div> //v-text指定标签文本指令 <div v-on:click="add"> <div> //v-on事件绑定指令 但并不是所有的指令都以 v- 开头,对于一些简写,也是

  • 详解VUE自定义组件中用.sync修饰符与v-model的区别

    .sync修饰组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-03</title> <!-- 引入Vue --> <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css&q

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

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

  • 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事件修饰符native、self示例详解

    事出有因 之前面试被问到的native和self相关问题,self我觉得自己应该能回答出来,可能被之前一小时的问题整懵逼了.尴尬~~ 自己研究了一下,不足之处望补充,相互进步 native 修饰符native,有什么用 native是原生事件(第一反应,当时没然后了...) 恶补一下 native 一定是用于自定义组件,也就是自定义的html标签 结合代码说得明白 <body> <div id="app"> <div class="box&quo

  • vue .sync修饰符的使用详解

    vue的官网介绍非常不错,先通读一遍. 2.3.0+ 新增 在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之.举个例子,在一个包含  title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图: this.$emit('update:title', newTi

  • Kotlin修饰符lateinit(延迟初始化)案例详解

    Kotlin修饰符lateinit(延迟初始化)案例详解

    Kotlin定义变量一般有如下写法 lateinit var name: String var age: String? = null 那么用lateinit 修饰和下面那种有什么区别呢,我们来看一下这两行代码反编译成java代码是什么样子的. @NotNull public String name; @Nullable private String age; @NotNull public final String getName() { String var10000 = this.name

  • java 方法重写与权限修饰符以及多态和抽象类详解概念和用法

    java 方法重写与权限修饰符以及多态和抽象类详解概念和用法

    1.方法重写 子类写和父类一样的方法定义 public void call(){ System.out.println("输出文字"); //父类的方法 } public void call(){ System.out.println("helloworld"); } //子类的方法 重写父类方法时,容易写错名字怎么办? 加个@Override 注解 如果报错,说明重写父类方法时,写错了 @Override: @Override public void call()

  • Vue中sync修饰符分析原理及用法示例

    Vue中sync修饰符分析原理及用法示例

    目录 不使用sync修饰符的代码示例 使用sync修饰符的代码示例 sync修饰符的原理 前几天在看别人代码时,发现了sync修饰符的妙用,特记录其用法和原理如下. 不使用sync修饰符的代码示例 父组件: <template> <div> <div v-if="show">11111</div> <h3>下面是子组件</h3> <SyncDemo :show="show" @update

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

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

  • 如何理解Vue的.sync修饰符的使用

    本文介绍了Vue的.sync修饰符的使用,分享给大家,也给自己留个笔记 案例 <div id="app"> <div>{{bar}}</div> <my-comp :foo.sync="bar"></my-comp> <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-

  • vue 之 .sync 修饰符示例详解

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行"双向绑定". 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值. 这很方便,但也会导致问题,因为它破坏了单向数据流.(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态. 这在 debug 复杂

随机推荐