Question

你能告诉我如何在vue js中使用watch功能。我试过使用但是我收到了这个错误。

vue.js:485 [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: "m"

found in

---> <AddTodo>
       <Root>

https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

我在主要组件中创建了不同的组件和监视属性

var AddTODO = Vue.extend({
    template: '#add-todo',
    props: ['m'],
    data: function () {
        return {
            message: ''
        }
    },
    methods: {
        addTodo: function () {
            console.log(this.message)
            console.log(this.m);
            this.m =this.message;
        },
    },
});

当我尝试添加item时，我收到此错误消息。 重现此错误的步骤

在输入字段中输入任意内容，然后点击Add button

Answer 1

this.m =this.message;

这一行是问题，

建议您不要直接修改道具......

而是创建一个数据属性然后修改它。

它显示警告，因为您正在修改prop项，每当父组件重新渲染时，prop值都会被覆盖。

Answer 2

只要您在组件外部更改其值，组件的道具就会在组件中自动更新。出于这个原因，尝试从组件内部更改属性的值是一个坏主意：您应该将props用作只读。如果您想使用道具作为某个组件的data的初始值，您可以这样简单地声明：

data: function () {
    return {
        changeable: this.receivedProp;
    }
},

话虽这么说，如果你试图从一个组件内部改变一个道具的值，以便能够在你之外使用你重新分配的道具，那么你的做法是错误的。您应该使用Vue's custom events来处理此问题。请记住，正如Vue的文档所述：

在Vue中，父子组件关系可以概括为道具向下，事件向上。父级通过道具将数据传递给子级，子级通过事件向父级发送消息。

如何在vue js中使用watch功能

2 个答案: