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

2024-12-01 14:23:23

本文介绍了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-comp> -->
</div>
<script>
  Vue.component('my-comp', {
    template: '<div @click="increment">点我+1</div>',
    data: function() {
      return {copyFoo: this.foo}
    },
    props: ['foo'],
    methods: {
      increment: function() {
        this.$emit('update:foo', ++this.copyFoo);
      }
    }
  });
  new Vue({
    el: '#app',
    data: {bar: 0}
  });
</script>

说明：代码<my-comp :foo.sync="bar"></my-comp>会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>，就是一个语法糖。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue input控件通过value绑定动态属性及修饰符的方法

对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):  <input type="radio" v-model="picked" value="a">  <input type="check
Vue.js学习笔记之修饰符详解

本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点"."连接修饰符名称. 一.v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令.在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值. 为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安
vue事件修饰符和按键修饰符用法总结

之前关于vue事件修饰符和按键修饰符的一点分析,最近需要回顾,就顺便发到随笔上了在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. 为了解决这个问题, Vue.js 为 v-on 提供了事件修饰符.通过由点(.)表示的指令后缀来调用修饰符. .prevent .capture
如何理解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 复杂
详解Vue的sync修饰符

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

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

目录前言一.v-model 1. 作用 2.v-model的本质 3. v-model的特殊用法二..sync修饰符 1. .sync修饰符作用 2. .sync修饰符本质总结 .sync与v-model区别是前言在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖.但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符.在这里就两者的使用进
vue .sync修饰符的使用详解

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

目录 v-model .sync 细微之处的区别总结功能作用场景: v-model  <template>  <Child v-model="model"></Child>   <Ch
vue中的.sync修饰符用法及原理分析

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

目录子组件通过.sync修饰符修改props属性子组件修改父组件prop的几种方式常用方式取巧方式子组件通过.sync修饰符修改props属性在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed
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的.sync修饰符的使用

相关推荐

随机推荐