Vue.js 报错：Avoid mutating a prop directly - 解决方法

"vendor.c731851277d723375e0c.js:20 [Vue warn]: 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: "visible"\n\n这个报错是由于直接修改一个父组件传递过来的 prop 值而引起的。\n\n要解决这个问题，你可以创建一个与 prop 值相关的 data 属性，并在该属性上进行修改。\n\n例如，你可以在组件中添加一个 data 属性，命名为 isVisible，并将父组件传递过来的 visible prop 值赋值给它。然后，你可以在组件内部修改 isVisible 的值，而不是直接修改 visible prop。\n\n示例代码如下：\n\njavascript\nprops: {\n visible: {\n type: Boolean,\n required: true\n }\n},\ndata() {\n return {\n isVisible: this.visible\n }\n},\nmethods: {\n toggleVisible() {\n this.isVisible = !this.isVisible;\n }\n}\n\n\n在上面的示例中，我们将 visible prop 值赋值给了 isVisible data 属性，然后在 toggleVisible 方法中修改 isVisible 的值。\n\n这样，你就避免了直接修改 prop 值的问题，同时也避免了 Vue 的警告。