修饰符.sync的用法

修饰符.sync的用法

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

• 在vue.2.3.0从vue 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