今天在写组件中从父组件中通过props传值之后,在methods中对子组件的值进行重新赋值时候报出错误。
代码所示:
Vue.component("opportunity-list-component",{
props: {//这里是组件可以接受的参数,也就是相当于面向原型写组件时的配置参数,用户可以传递不同参数,自己定义组件
activeTypeIndex: {
type: Number,
default: 1,
},
},
template:`
<!-- main -->
<div class="opportunity-main">
<el-container>
<el-main>
<div class="mm-content">
</div>
</el-main>
</el-container>
</div>`,
methods:{//这里定义的组件的方法,利用$emit()进行父子组件通信,子组件通过点击事件告诉父组件触发一个自定义事件,$emit()方法第二个参数也可以用来传递数据
handleTypeClick(index) {
this.activeTypeIndex = index;
this.$emit('getCalled',this.activeTypeIndex);
console.log(index);
}
},
});
通过查找资料发现,需要在子组件中声明一个中间变量,例如:tempTypeSelect,避免直接改变父组件传递过来的activeTypeIndex。
所以添加代码如下:
data():
data() {
return {
tempTypeSelect: this.activeTypeIndex
}
}
methods:
methods:{//这里定义的组件的方法,利用$emit()进行父子组件通信,子组件通过点击事件告诉父组件触发一个自定义事件,$emit()方法第二个参数也可以用来传递数据
handleTypeClick(index) {
this.tempTypeSelect = index;
//通知父组件tempTypeSelect已修改
this.$emit('getCalled',this.tempTypeSelect);
console.log(index);
}
},
现在再刷新一下看看: