码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-20 14:33:01      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:直接   label   gen   pre   methods   rip   tps   ack   输入框   

.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

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

标签:直接   label   gen   pre   methods   rip   tps   ack   输入框   

原文地址:https://www.cnblogs.com/shix0909/p/11217591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!