Vue中的sync属性修饰符（父子数据同步）

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

sync属性修饰符

属性修饰符.sync，可以实现父子数据同步。

以后在elementUI组件中出现，实现父子数据同步。

不使用sync修改符实现父子数据同步

父组件：

 	<p>小明的爸爸现在有{{ money }}元</p>
    <h2>不使用sync修改符</h2>
	<!-- 
	 :money 父组件给子组件传递props
      @update:money给子组件绑定的自定义事件,只不过名字叫做update:money
      目前这种操作,其实和v-model很相似,可以实现父子组件数据同步
      money=params 给money重新赋值,为子组件传回来的数据
	-->
    <Child :money="money" @update:money="money = params"></Child>
    <h2>使用sync修改符</h2>

    data() {
        return {
          money: 10000
        }
      },

子组件：

  <div style="background: #ccc; height: 50px;">
    <span>小明每次花100元</span>
    <button @click="$emit('update:money',money - 100)">花钱</button>
    爸爸还剩 {{money}} 元
  </div>



	//接受父组件传过来的值
    props:['money']

点了两次扣了两百

这样也能实现父子组件数据同步

使用sync修改符实现父子数据同步

父组件：

 	<p>小明的爸爸现在有{{ money }}元</p>
    <h2>不使用sync修改符</h2>
	<!-- 
	:money.sync的作用：
	第一，父组件给子组件传递props money	
	第二，给当前子组件绑定了自定义事件，而且事件名称即为update:money
	-->
    <Child  :money.sync="money"></Child>
    <h2>使用sync修改符</h2>

    data() {
        return {
          money: 10000
        }
      },

子组件：

 <div style="background: #ccc; height: 50px;">
    <span>小明每次花100元</span>
     <!--
		这个位置的update:money就可以随意取名字了，update是固定要的冒号后面可以更改
		$emit触发自定义事件，第一个参数就是触发自定义事件的名字，
		第二个参数是子组件需要把父组件还剩多少钱告诉父组件	
	-->
    <button @click="$emit('update:money',money - 100)">花钱</button>
    爸爸还剩 {{money}} 元
  </div>



	//接受父组件传过来的值
    props:['money']

效果一样的：

总结

属性修饰符sync父子组件数据同步的一种，和v-model差不多可以实现父子组件数据同步

:money.sync,代表父组件给子组件传递props['money'],给当前子组件绑定一个自定义事件(update:money)