Vue.js更改道具

JavaScript

L路易

2020-03-12

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

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

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

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

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

第1095篇《Vue.js更改道具》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
凯Sam 2020.03.12

为了帮助任何人，我都面临着同样的问题。我只是将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;
        }
    }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android