Vue.js改變模板數據

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>