15. Vue2.4+新增属性.sync

Posted 2022-04-28 shix0909

.sync

在vue2.4以前，父组件向子组件传值用props；子组件不能直接更改父组件传入的值，需要通过$emit触发自定义事件，通知父组件改变后的值。

父组件：

<template>
  <div>
      <p>父组件传入子组件的值：name</p>
    <fieldset>
      <legend>子组件</legend>
      <child :val.sync="name">
      </child>
    </fieldset>
  </div>
</template>

<script>
import child from ‘./child‘;
export default 
    components:child,
    data: function () 
        return 
            name:‘hello‘
        
     ,
    methods: 
        
    

</script>

<style>

</style>

子组件：

<template>
  <div style="margin-top: 300px;margin-left: 500px;">
    <label class="child">
        输入框：
       <input :value=val @input="$emit(‘update:val‘,$event.target.value)"/>
    </label>
  </div>
</template>

<script>
export default 
    name:‘child‘,
    props:
        val:String
    ,
    data()  
        return 
        
    ,
    methods: 
    

</script>

<style>

</style>

写法上简化了一部分，很明显父组件不用再定义方法检测值变化了。其实只是对以前的$emit方式的一种缩写，.sync其实就是在父组件定义了一update:val方法，来监听子组件修改值的事件。

参考：https://www.jianshu.com/p/4649d317adfe