vue Avoid mutating a prop directly since the value will be overwritten whenever the parent component

在使用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 传参给子组件，子组件又通过$emit的方式更新父组件中对应Prop绑定的参数，违背了数据传输单向流动原则。正确的写法应该是父组件通过this.$refs.XXX.XXX()的方式让子组件执行对应方法。
如在列子中父组件需要控制打开和关闭子组件中的dialog，应该做如下处理：

//子组件
<template><el-dialogtitle="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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！