实现VUE2.0中props数据双向绑定的一种方案

问题描述

在vue2.0中，我们通过props方法来接受父组件所传过来的值，但是这个过程是单项的，父组件可以改变传给子组件的值，但是如果子组件想改变所接受的值并传给父组件是不可以的，会报以下的错误。

该错误的意思的是：避免直接更改一个PROP，因为每当父组件重新呈现时，该值就会被覆盖。相反，使用基于PROP值的数据或计算属性。道具变异：“选择类型”。 

报错案例

看下面这个例子，我们在子组件中接受了父组件传来的值，但是我们是不可以去这样直接修改这些值的，一旦这样修改，就会发生上述的错误。

 解决方案

1.在子组件定义两个变量，用来存放所接收的需要改变的值

return {
    selectTypeWatch: this.selectType,//存放需要改变的接受的值
    onlyContentWatch: this.selectType
}

2.在子组件中对这些变量的值进行监听，如果这些值发生了变化，则向外发送一个事件

watch: {
    selectTypeWatch(type){
        this.$emit("on-type-change",type);//组件内对selectTypeWatch变更后向外部发送事件通知
    },
    onlyContentWatch(val){
        this.$emit("on-content-change",val);//组件内对onlyContentWatch变更后向外部发送事件通知
    }
}

 

3.在父组件中，调用子组件的位置，对这些事件进行监听，即检测到子组件发送的事件，就会在父组件中调用指定的函数。

 

<ratingselect @on-content-change='onlyContentChange' @on-type-change="selectTypeChange" :select-type="selectType" :onlyContent="onlyContent" :desc="desc" :ratings="food.ratings"></ratingselect>

4.在该函数中可以接受子组件所发送的值，然后处理相应的逻辑即可

selectTypeChange(type) {
   this.selectType=type;
},
onlyContentChange(val){
   this.onlyContent=val;
}

5.在子组件中只需要对我们之前定义的临时变量进行改变即可。