首页 > 代码库 > vue2 props双向数据绑定问题

vue2 props双向数据绑定问题

2024-09-11 13:54:16   214人阅读

与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;
      }

如此而已。

vue2 props双向数据绑定问题


联系
我们