VueJS 組件不加載

Question

我有以下 vuejs 組件。 我知道這是一個非常簡單的示例，但仍然無法正確加載。 在我的代碼下面找到：

 Vue.component('my-component', { template: '<div>{{ msg }}</div>', data: { msg: 'hello' } }); new Vue({ el: '#app-6' });

 <!DOCTYPE html> <html lang="en"> <meta> <meta charset="UTF-8"> <title>Components in Vue.js</title> </meta> <body> <div id="app-6"> test <my-component></my-component> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script> </body> </html>

有什么建議我做錯了嗎？

感謝您的回復！

Answer 1

數據必須始終是一個函數

 var data={msg: 'hello'} Vue.component('my-component', { template: '<div>{{ msg }}</div>', data:function() { return data; } }); new Vue({ el: '#app-6' });

 <!DOCTYPE html> <html lang="en"> <meta> <meta charset="UTF-8"> <title>Components in Vue.js</title> </meta> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script> <div id="app-6"> test <my-component></my-component> </div> </body> </html>

Answer 2

您的數據應該是這樣的函數：

data () {
    return {
        msg: 'Hello'
    }
}

更多信息在這里： https ://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

Answer 3

你應該這樣做。

Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
   data: function () {
    return {
      msg: 'Hello'
   }
}
});

VueJS 組件不加載

問題描述

3 個解決方案

解決方案1
4 已采納 2018-01-23 07:24:46

解決方案2
2 2018-01-23 07:21:28

解決方案3
1 2018-01-23 07:33:55

VueJS 組件不加載

問題描述

3 個解決方案

解決方案1 4 已采納 2018-01-23 07:24:46

解決方案2 2 2018-01-23 07:21:28

解決方案3 1 2018-01-23 07:33:55

解決方案1
4 已采納 2018-01-23 07:24:46

解決方案2
2 2018-01-23 07:21:28

解決方案3
1 2018-01-23 07:33:55