vue实现双向绑定的基础方法

Vue2的组件props通信方式

在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。

比如要实现一个这样的开关

1.父组件通过props将初始的值传到子组件

2.子组件接收到初始值后，创建一个副本数据（由于从父组件直接获取到的props不能更改，data中的数据可以更改，这才创建一个可以更改数据的副本）

 props: [

     'checkType' // 当前checkBox的状态，选中还是未选中

 ],

 data () {

     return {

         myCheckType: this.checkType

     }

 }

3.子组件创建一个监听，在从父组件传来的值改变的时候，重新给副本数据赋值

 watch: {

     checkType (val) {

         this.myCheckType =  val

     }

 }

4.子组件绑定改变事件，在触发改变的时候，改变副本数据的值，并将改变后的值$emit给父组件

<img src="../../assets/images/icon_checkbox1_32^.png" @click="toggle">

 methods: {

     toggle (status) {

         this.myCheckType = !this.myCheckType

         this.$emit('changeType', this.myCheckType)

         const event = window.event

         event.stopPropagation()

     }

 }

5.父组件中监听子组件$emit的事件，将子组件传递的值重新赋值给data

<form_list :checkType="test.checkType" @changeType="toggle"></form_list>

 data () {

     return {

         test: {

             checkType: false

         }

     }

 },

 methods: {

     toggle (data) { // data--子组件传递的值

         this.test.checkType = data

     }

 }

6.在父组件中实现了值得改变，传递到子组件中

7.如果在循环中使用组件，子组件需要接收循环的索引；在子组件向父组件$emit的时候，数据中同时包括索引。

8.父组件能够借助索引将子组件中要传递的数据插入该索引所在的数据集

本文参考如何在Vue2中实现组件props双向绑定

巴特西

vue实现双向绑定的基础方法

Vue2的组件props通信方式

最新文章

热门文章