Vue.js更改道具

L路易2020-03-12

我对如何更改组件内部的属性有些困惑，假设我具有以下组件：

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

虽然可以，但是会发出以下警告：

避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“可见”（位于组件中）

现在，我想知道最好的处理方式是什么，显然visible在DOM中创建组件时会传递该属性：<Foo :visible="false"></Foo>

凯Sam2020/03/12 15:52:08

为了帮助任何人，我都面临着同样的问题。我只是将v-model =“”内部的var从props数组更改为data。记住道具和数据之间的区别，在我看来，改变它不是问题，您应该权衡一下决策。

例如：

<v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">

之前：

export default {
    data: function () {
        return {
            any-vars: false
        }
    },
    props: {
            dialog: false,
            notifications: false,
            sound: false,
            widgets: false
        },
    methods: {
        open: function () {
            var vm = this;

            vm.dialog = true;
        }
    }
}

后：

export default {
    data: function () {
        return {
            dialog: false
        }
    },
    props: {
            notifications: false,
            sound: false,
            widgets: false
        },
    methods: {
        open: function () {
            var vm = this;

            vm.dialog = true;
        }
    }
}

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer