Vue 2-变异道具vue-warn

泡芙小卤蛋Tom2020-03-09

我开始https://laracasts.com/series/learning-vue-step-by-step系列。我在上课Vue，Laravel和AJAX时遇到了以下错误：

vue.js：2574 [Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。变异的道具：“列表”（位于component中）

我在main.js中有此代码

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

我知道当我覆盖列表属性时问题出在created（）中，但是我是Vue的新手，所以我完全不知道如何解决它。任何人都知道如何（并请解释为什么）修复它？

Gil启人2020/03/09 22:54:23

是的！vue2中的变异属性是反模式。但是...只要使用其他规则来打破规则，然后继续吧！您需要在paret范围内的组件属性中添加.sync修饰符。 <your-awesome-components :custom-attribute-as-prob.sync="value" />

we很简单，我们杀死蝙蝠侠😁

梅Near米亚2020/03/09 22:54:23

我个人总是建议您是否需要对道具进行突变，首先将其传递给计算属性，然后从那里返回，然后一个人就可以轻松地对道具进行突变，即使您可以追踪道具突变（如果这些道具正在从另一个突变）组件还是我们也可以观看。

小胖Eva2020/03/09 22:54:23

不要直接在组件中更改道具，如果需要更改，请设置一个新属性，如下所示：

data () {
    return () {
        listClone: this.list
    }
}

并更改listClone的值。

斯丁斯丁2020/03/09 22:54:23

我也面临这个问题。我使用$on和后警告消失了$emit。这就像用法$on，$emit建议将数据从子组件发送到父组件。

GOLEY前端2020/03/09 22:54:23

支撑下来，事件向上。这就是Vue的模式。关键是，如果您尝试变异从父代传来的道具。它将无法工作，只会被父组件重复覆盖。子组件只能发出一个事件以通知父组件执行某项操作。如果您不喜欢这些限制，则可以使用VUEX（实际上，这种模式会吸收复杂的组件结构，您应该使用VUEX！）

Newest Answer

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

5 Answer

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

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

1 Answer