javascript – Vue.js改变道具

我对如何更改组件内的属性感到有点困惑,假设我有以下组件：

{
    props: {
        visible: {
            type: Boolean,
            default: true
        }
    },
    methods: {
         hide() {
              this.visible = false;
         }
    }
} 

虽然它有效,但会发出以下警告：

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”
(found in component )

现在我想知道处理这个问题的最佳方法是什么,显然在DOM中创建组件时传入了可见属性：< Foo：visible =“false”>< / Foo>

解决方法:

引用your fiddle中的代码

不知何故,你应该决定一个地方让国家生活,而不是两个.我不知道将它放在Alert中是否更合适,或者只是在它的用例中使用它,但是你应该选择一个.

如何决定国家的生活方式

父母或任何兄弟组成部分是否依赖于州？

>是：那么它应该在父母(或在一些外部国家管理)
>否：然后更容易将其置于组件本身的状态
>有点儿：见下文

在极少数情况下,您可能需要组合.也许你想让父母和孩子都有隐藏孩子的能力.那么你应该在父母和孩子都有状态(所以你不必在孩子里面编辑孩子的道具).

例如,如果出现以下情况,则可以看到儿童：可见&& state_visible,其中visible来自props并反映父级状态中的值,state_visible来自子级状态.

我不确定这是否是你想要的行为,但是here is a fiddle.我想你实际上只想在点击孩子时调用父组件的toggleAlert.

标签：javascript,vue-js,vue-component
来源： https://codeday.me/bug/20191005/1856955.html