Question

我有以下代码：

Vue.component('greeting', {
    template: `<h1>{{ greeting }}</h1>`,

    data: function () {
        return {
            greeting: app.text
        }
    },
});

var app = new Vue({
    el: '.app',
    data: {
        text: 'Hello'
    },
    methods: {
        changeText: function () {
            this.text = 'Goodbye'
        }
    }
});

因此，当我调用changeText方法时，它会更改text，但组件中的greeting不会更新。在这种情况下，我不明白我是否应该使用道具，观察者或计算属性。

Answer 1

您需要将其作为道具传递给组件：

Vue.component('greeting', {
    template: `<h1>{{ greeting }}</h1>`,
    props: ['greeting']
});

和html：

<greeting :greeting="text"></greeting>

Vue.js更改模板数据

1 个答案: