修饰符.sync的用法

单个props数据绑定用法
对象型props数据绑定用法

  • vue.2.3.0vue 1.0.0里面重新拿会修饰符.sync
    在这里插入图片描述
    很明显它的意思就是说.sync修饰符可以像v-model一样实现类似双向绑定的场景用法。
  • 还有一点需要注意
    在这里插入图片描述
    这几行的大概意思就是要求我们用$emit('update:xx', 参数)的形式传参,因为如果不用这种方法子组件内的props参数将无法成功修改,而是没有反应,所以Vue官方建议我们在子组件触发传递父组件事件中也同样用update:xx这种写法。


    单个props数据绑定用法
  • OK,上个例子
    • 子组件代码
	<div v-if="show">
      <div>我是子组件</div>
      <button @click="hidden">子组件的取反按钮</button> 
      <!--点击按钮修改show属性, 同时影响control属性-->
    </div>
    const Son = {
      template: '#sonCom',
      props: ['show'],
      methods: {
        hidden() { 
        // 这里会修改props里的show属性。同时父组件传递过来的参数也会一并修改,很像v-model
        this.$emit('update:show', false); 
        }
      }
    }
  • 父组件
  <div id="app">
    <Son :show.sync="control"></Son>
    <button @click="change">父组件的取反按钮</button>
    <!--点击按钮修改control属性,同时影响子组件的show属性-->
  </div>
    const vue = new Vue({
      el: '#app',
      data: { control: true },
      methods: {
        change() {
          this.control = !this.control; // 取反
        }
      },
      components: {
        Son
      }
    })
  • 实例
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
  • 感觉这个用发很像v-model双向数据绑定,将子组件的属性和父组件穿过的属性关联在一起,互相影响,同时改变。可以解决这样最基础的场景:子组件属性改变后父组件传值过来的父属性也要同时改变,就可以利用修饰符.sync

对象型props数据绑定用法
  • 最后官方还给了一个一同传递多个值,而且都会受影响的小例子(但没有例子)。下面是我自己按照它说的写的一个小例子。
    • 父组件
  <div id="app">
    <div>我是父组件{{propsObj.a + '--' + propsObj.b + '--' + propsObj.c}}</div>
    <Son v-bind.sync="propsObj"></Son>
  </div>
const vue = new Vue({
      el: '#app',
      data: {
        propsObj: {
          a: 'a',
          b: 'b',
          c: 'c'
        }
      },
      components: {
        Son
      }
    })
  • 子组件
    <div>
      <div>我是子组件{{a + '--' + b + '--' + c}}</div>
      <button @click="chang">子组件按钮修改子组件属性</button>
    </div>
    const Son = {
      template: '#sonCom',
      props: ['a', 'b', 'c'],
      methods: {
        chang() {
          this.$emit('update:a', '我会修改A,父组件会改变吗?')
        }
      }
    }
  • 实例
    在这里插入图片描述
    在这里插入图片描述
  • 这里要注意的是官方的提示
    在这里插入图片描述

每天一个脱发小技巧 —— coderNoob

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐