精华内容
下载资源
问答
  • vue.sync
    2020-12-31 08:50:08

    在使用vue的. sync中,怎么都用不出来。

    出来错误:

    I Avoid mutating a prop directly since the value will be overuritten whenever the parent component re-renders.

    查资料,说的都是vue2以上,取消了.sync..只能在vue1以下用.

    可官方的资料中可以用呀: .sync 修饰符.

    官方的不可能有问题呀.

    于是,按照官方的一步步下去,发现.sync可以使用.但是子组件中要写,这个一定要写的,一定要写一定要写一定要写

    this.$emit('update:title', newTitle)

    title是要在父组件中改变的变量.

    这样一写的话,在父组件中,引用子组件,.sync就启作用了

    I Avoid mutating a prop directly since the value will be overuritten whenever the parent component re-renders.

    标签:vue,title,Avoid,since,sync,directly,使用,组件

    来源: https://www.cnblogs.com/ztgzlu/p/11142653.html

    更多相关内容
  • 主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue.sync的用法

    千次阅读 2022-02-20 22:12:57
    那么同时,vue中也提供了一种解决方案.sync修饰符。在此之前,希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。 .sync修饰符: 首先我们知道,父组件通过绑定属性的方式向子组件传值,而在...

    背景:
    日常开发时,我们总会遇到需要父子组件双向绑定的问题,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的。那么同时,vue中也提供了一种解决方案.sync修饰符。在此之前,希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。

    .sync修饰符:
    首先我们知道,父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信,通过这种间接的方式改变父组件的data,从而实现子组件改变props的值。比如向下边这这样:

    子组件使用$emit向父组件发送事件:

    this.$emit('update:title', newTitle)
    

    父组件监听这个事件并更新一个本地的数据title:

    <text-document
      :title="title"
      @update:title="val => title = val"
    ></text-document>
    

    为了方便这种写法,vue提供了.sync修饰符,说白了就是一种简写的方式,我们可以将其当作是一种语法糖,比如v-on: click可以简写为@click。而上边父组件的这种写法,换成sync的方式就像下边这样:

    <text-document
      :title.sync="title"
    ></text-document>
    

    有没有发现很清晰,而子组件中我们的写法不变,其实这两种写法是等价的,只是一个语法糖而已,如果到这里你还不太明白。下边是个完整的demo,可以copy自己的项目中尝试一下。相信你会恍然大悟。
    父组件:

    <template>
      <div>
        <child :name.sync="name"></child>
        <button @click="al">点击</button>
        <button @click="change">改变</button>
      </div>
    </template>
     
    <script>
    import child from './child'
    export default {
      name: 'list',
      components: {
        child
      },
      data () {
        return {
          listItems: ['buy food', 'play games', 'sleep'],
          name: 'xiaoming'
        }
      },
      methods: {
        al() {
          alert(this.name);
        },
        change() {
          this.name = '123';
        }
      }
    }
    </script>
    

    子组件:

    <template>
      <div>
        <input :value="name" @input="abc" type="text">
      </div>
    </template>
    <script>
      export default {
        props: {
          name: {
            type: String,
            required: true
          }
        },
        methods: {
          abc(e) {
            console.log(e.target.value);
            this.$emit('update:name', e.target.value);
          }
        }
      }
    </script>
    
    展开全文
  • vue .sync修饰符

    2021-11-22 16:11:39
    那么同时,vue中也提供了一种解决方案.sync修饰符。 首先我们知道,父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信,通过这种间接的方式改变父组件的data,从而实现子组件改变props...

    日常开发时,我们总会遇到需要父子组件双向绑定的问题,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的。那么同时,vue中也提供了一种解决方案.sync修饰符。

    首先我们知道,父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信,通过这种间接的方式改变父组件的data,从而实现子组件改变props的值。比如向下边这这样:

    子组件使用$emit向父组件发送事件:

    this.$emit('update:title', newTitle)
    

    父组件监听这个事件并更新一个本地的数据title:

    <text-document  :title="title"  @update:title="val => title = val"></text-document>
    

    为了方便这种写法,vue提供了.sync修饰符,说白了就是一种简写的方式,我们可以将其当作是一种语法糖,比如v-on: click可以简写为@click。而上边父组件的这种写法,换成sync的方式就像下边这样:

    <text-document  :title.sync="title"></text-document>
    

    有没有发现很清晰,而子组件中我们的写法不变,其实这两种写法是等价的,只是一个语法糖而已。

    总结:

    sync修饰符,与我们平常使用$emit实现父子组件通信没有区别,只不过是写法上方便一些。

    展开全文
  • Vue 父子传值是单项数据流,子元素如果直接操作通过Prop 传过来的值会就报错,但是在实际业务中就有这样的需求,所以就有了 sync 修饰符 。 例子 /* * 父组件 */ <FilelistUpdate ref="filelistUpdate" :...

    官网介绍

    传送门

    场景介绍

    Vue 父子传值是单项数据流,子元素如果直接操作通过Prop 传过来的值会就报错,但是在实际业务中就有这样的需求,所以就有了 sync 修饰符 。

    例子

    /*
    * 父组件
    */
    
    <FilelistUpdate
    	ref="filelistUpdate"
    	:loading="insuredLoading"
    	:FileListdata.sync="FileListdata"
    	@save="saveFilelistupdate"
    />
    
    
    /*
    * 子组件
    */
     ... 
      props: {
        FileListdata:{
          type: Array,
          default: () => {
            return [];
          },
        },
      },
      methods: {
      	uploadBeforeRemove(file, key) {
      	/*
      	* 上传文件的删除方法
      	* 假定我们在这个方法体内我们要修改 Prop 传过来的值,
      	* 那么我们就需要把值传给父元素,实现伪双向数据绑定
      	*/
    	... 修改FileListdata
    	let FileListdataNew = FileListdata;
    	this.$emit("update:FileListdata", FileListdataNew );
      	}
      }
      ...
    

    总结

    1,父元素中的 Prop 传值 要使用 sync修饰符
    2,this.$emit(“update:FileListdata”, FileListdataNew ); 通知父元素修改数据,子元素数据也发生改变

    展开全文
  • vue .sync 用法

    千次阅读 2020-02-05 19:11:29
    例如: <text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document> 为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符: <text-document v-bind:title.sync=...
  • 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的 问题描述: 问题场景就是子组件传递数据给父组件,父组件收到并改变...
  • Vue .sync 语法糖

    千次阅读 2020-06-18 12:57:18
    在讲解这个语法糖之前,我们有必要先了解 Vue 中组件之间 单向数据流 通信规则: Vue 提倡单向数据流,即父级 props 的更新会流向子组件,但是反过来则不行。这是为了防止意外的改变父组件状态,使得应用的数据流变...
  • 1..sync的使用: .sync修饰符的作用就是更方便的实现父子组件间双向数据绑定,以前要实现父子组件双向数据绑定要这样做: 父组件: <template> <div> <child1 :num="faNum" @update="val=>{...
  • 主要介绍了vue 之 .sync 修饰符的相关知识,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下
  • vue .sync与props的关系

    2019-12-23 11:13:31
    vue组件传值特点 props 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。 1、props只能单向传输,从父组件到子组件; 2、子...
  • Vue .sync修饰符

    千次阅读 2022-04-24 10:56:10
  • vue .sync修饰符的使用

    2020-12-31 08:50:07
    vue的官网介绍非常不错,先通读一遍。2.3.0+ 新增在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显...
  • 关于vue .sync修饰符

    2021-01-13 16:58:52
    vue中的sync修饰符是一种组件属性双向绑定的语法糖。假如有组件1varcomponent1={template:'我是{{title}}',props:['title','visible']}其中visible要使用sync修饰符exportdefault{data(){return{visible:false}}}以....
  • vue .sync修饰符的用法

    千次阅读 2018-09-28 11:24:02
    那么同时,vue中也提供了一种解决方案.sync修饰符。在此之前,希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。如果你对此还不了解父子组件如何通过$emit实现双向通信,那就点我先了解下吧...
  • 问题描述最近在学习Vue,在学习自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下使用.sync修饰符,即// this.$emit('update:...
  • Vue——.sync修饰符

    2022-04-25 22:16:24
    根据官方文档理解.sync: `是用来对父组件监听子组件对于props数据的修改而产生的事件的一种缩写` `vue官网:` 2.3.0+ 新增 -在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会...
  • Vue .sync修饰符一、.sync修饰符二、@click.stop与@click.prevent 一、.sync修饰符 <comp :foo.sync="bar"></comp> 等价于 <comp :foo="bar" @update:foo="val => bar = val"></comp> ...
  • .sync 相当于 v-bind: xxx='***' v-on:update:xxx='*** = $event' 注意:v-bind.sync= 一个对象或者数组 eg1. // html: <comp v-bind.sync="doc"></comp> //js: var comp = { template: `<...
  • vue .sync

    2022-06-13 10:52:37
    vue.sync
  • vue中的.sync修饰符

    2022-07-26 15:28:17
    vue中的.sync修饰符本质上是`@update:自定义事件名`这种方式的语法糖
  • vue .sync修饰符的理解

    2020-07-06 19:04:40
    syncvue中用于实现简单的“双向绑定”的语法糖,在平时的开发中是非常使用的。 vue的prop是单向下行绑定:父级的prop的更新会向下流动到子组件中,但是反过来不行。可是有些情况,我们需要对prop进行“双向绑定”...
  • 子组件中用props接收外部传来的值 此处是isShow 然后在父组件中引入并使用.sync,这样既可被外部也可以被内部修改 然后子组件中向外触发事件 this.$emit("update:isShow"...
  • 主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 解决这个弊端的方式是使用.sync修饰符: sync本质上只是一个语法糖,当你添加.sync时,他等价于代码: 其中fn1: fn1(val){ this.money = val } .sync 相当于给组件绑定了一个属性(子组件中还是通过props接收),...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,692
精华内容 9,076
关键字:

vue.sync