Question

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的值使用数据或计算属性。支持变异：＆＃34;名称＆＃34; （在组件中找到）

Answer 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

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

1 个答案: