Question

我有以下vuejs组件。我知道这是一个非常简单的例子，但它仍然无法正确加载。在下面找到我的代码：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

有什么建议我做错了吗？

感谢您的回复！

Answer 1

数据必须始终是一个功能

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

您的数据应该是这样的函数：

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

更多信息： https://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 个答案: