在使用vue 时报错:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “XXX”
报错原因是父组件通过props 传参给子组件,子组件又通过
e
m
i
t
的
方
式
更
新
父
组
件
中
对
应
P
r
o
p
绑
定
的
参
数
,
违
背
了
数
据
传
输
单
向
流
动
原
则
。
正
确
的
写
法
应
该
是
父
组
件
通
过
t
h
i
s
.
emit的方式更新父组件中对应Prop绑定的参数,违背了数据传输单向流动原则。正确的写法应该是父组件通过this.
emit的方式更新父组件中对应Prop绑定的参数,违背了数据传输单向流动原则。正确的写法应该是父组件通过this.refs.XXX.XXX()的方式让子组件执行对应方法。
如在列子中父组件需要控制打开和关闭子组件中的dialog,应该做如下处理:
//子组件
<template>
<el-dialog
title="dialog"
:visible.sync="visible"
width="500">
</el-dialog>
</template>
<script>
export default {
name: "list_form",
data(){
return{
visible :false
}
},
methods:{
open(){
this.visible = true
}
}
}
</script>
<style scoped>
</style>
//父组件
<template>
<div>
<div>
<el-button type="primary" size="mini" @click="openFun">新增</el-button>
</div>
<el-table :data="list">
</el-table>
<list_form ref="listForm"/>
</div>
</template>
<script>
import List_form from "@/views/computer/list_form";
export default {
name: "list",
components: {List_form},
data(){
return {
list:[],
former:{
visible:false
},
}
},
methods:{
openFun(){
this.$refs.listForm.open()
}
}
}
</script>
<style scoped>
</style>