vue2 props双向数据绑定问题

与vue1不同,vue2中的props已经改变了之前双向数据绑定的机制,理由是数据流过于复杂理解有困难?

然后从父组件传向于子组件的props数据,子组件是不能再随意更改从props传来的数据了,因为父组件不会被通知到。

解决的方案有不少,比如vuex,比如自定义事件。

这里只列举自定义事件的解决方法,其实会用之后也特别简单。

在子组件的方法里使用$emit方法吗,传两个参数,第一个是父组件写的自定义事件,第二个则是从子组件传进的参数。

废话不多说,列举代码看的更爽!

//子组件:
<span @click="select(2,$event)" ></span>
props:{
selectType: {
type: Number,
default: ALL
}
select(type) { this.$emit('select',type); }

  

 //父组件
<ratingselect @select="selectRating"></ratingselect>


data() {
      return {   
        selectType: ALL,
       
      }
    },
selectRating(type) {
        this.selectType = type;
      }

如此而已。

原文地址:https://www.cnblogs.com/zhoujx1066/p/6650758.html