javascript - 如何在vue js中使用watch功能

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时，我收到此错误。 重现此错误的步骤

1. 在输入字段中输入任何内容，然后点击添加按钮

Answer 1

this.m =this.message;

这行是问题所在，

建议不要直接修改prop...

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

它显示警告，因为您正在修改 Prop 项，只要父组件重新渲染， Prop 值就会被覆盖。