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

最新推荐文章于 2025-12-05 08:37:05 发布

转载最新推荐文章于 2025-12-05 08:37:05 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shix0909/p/11217591.html

文章标签：

#javascript #ViewUI

本文详细介绍了在Vue.js中，如何使用.sync修饰符简化父子组件之间的数据传递与更新过程。在Vue2.4版本之前，父组件通过props将数据传递给子组件，而子组件通过$emit触发自定义事件来通知父组件更新数据。.sync修饰符的引入，使得这一过程更加简洁，父组件可以更直观地监听子组件修改值的事件。

.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>