Vue 2.0学习笔记:实现组件数据的双向绑定

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

通过上一节的学习,我们了解到了在Vue的组件中数据传递:prop向下传递,事件向上传递。意思是父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息。但Vue中,props是单向数据绑定,虽然在Vue 1.0版本中,通过.sync能实现双向数据绑定。但.sync在几个版本中被移除,尽管在2.3版本重新引入.sync修饰符,可这次引入只是作为一个编译时的语法糖存在。如果直接使用.sync修饰符来做双向数据绑定,会报警告信息。那么我们如何在组件中实现双向数据绑定呢?这一节我们就来学习这方面的相关知识。

实现组件双向数据绑定

上一节中最后的示例使用的是Vue 1.0版本中的.sync实现数据双向绑定。那我们先来看看抛弃.sync修饰符来实现组件双向数据绑定的工作:通过Vue提供的机制,绕开直接修改prop来实现组件双向数据绑定

其思路大致是这样:

  • 在数据渲染时使用prop渲染数据
  • prop绑定到子组件自身的数据上,修改数据时修改自身数据来替代prop
  • watch子组件自身数据的改变,触发事件通知父组件更改绑定到prop的数据

这样做的好处是:父组件数据改变时,不会修改存储prop的子组件数据,只是以子组件数据为媒介,完成对prop的双向修改

继续拿上一节的示例来举例,只不过接下来的示例,并没有使用.sync来实现双向数据绑定的效果。

修改的代码如下:

<div id="app">
    <div class="parent">
        <h3>父组件Parent数据</h3>
        <ul>
            <li>
                <label>姓名:</label>
                <span>{{ name }}</span>
                <input type="text" v-model="name" />
            </li>
            <li>
                <label>年龄:</label>
                <span>{{ age }}</span>
        
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/component-data-and-props-part2.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部