通过javascript修改VUE组件的正确方法是什么？答案

【问题标题】：What's the correct to modify VUE component via javascript?通过javascript修改VUE组件的正确方法是什么？
【发布时间】：2017-03-11 17:20:49
【问题描述】：

javascript

(function(exports){

Vue.component('my-component',{
    props: {
        name: String
    },
    template: '<div>\
    <h1>name: {{name}}</h1>\
    </div>\
    '
});

var myApp = new Vue({
    el: '#myApp'
});

exports.app = myApp;
});

html

<div id="myApp">
        <my-component name="yo!" ref="test"></my-component>
</div>

控制台或javascript访问组件

app.$refs.test.name = "yo man";

然后控制台显示 Vue 警告如下。通过javascript修改VUE组件的正确方法是什么？

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“名称” （在组件中找到）

【问题讨论】：

标签： vue.js

【解决方案1】：

您应该做的是将 name 指令绑定到父应用程序中的变量。

(function(exports){

    Vue.component(
        'my-component',
        {
            props: {
                name: String
            },
            template: '<div><h1>name: {{name}}</h1></div>'
        }
    );

    var myApp = new Vue(
        {
            el: '#myApp',
            data: {
                name: "Yo!"
            }
        }
    );

    exports.app = myApp;
    }
))();

还有你的 HTML

<div id="myApp">
    <my-component v-bind:name="name" ref="test"></my-component>
    <button v-on:click="name = 'Yo man'">Change</button>
</div>

JSFiddle

【讨论】：