今天，在做一个关于vue的demo的时候，发现vue的组件写法出现了错误，刚开始一直没看出来，经过我的一番查阅，才发现了这个错误，希望大家能够引以为戒，不要犯类似的错误！
错误源码：
在组件里面的数据，我直接跟其他时候一样，直接返回一个json对象，结果发现调试的时候，报如下错误：
它的意思是：data这个选项必须是一个函数！
接着，我把它改成了一个函数，如下：
调试后，发现还是报错 ！
它提示我说：data函数必须返回一个对象！而我返回的却是一个字符串！
于是，我改成了返回一个json对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div>
<p>{{mydata}}</p>
<myapp></myapp>
</div>
<template id="aaa">
<h3>我是父组件vm的子组件myapp->{{msg}}</h3>
</template>
</body>
<script>
var vm = new Vue({
el: 'div',
data: {
mydata: 'a'
},
components: {
myapp: {
data: function () {
return {
msg: 'woaini'
}
},
template: '#aaa'
}
}
});
</script>
</html>现在结果终于正确啦！
总结：
Vue组件里面放的数据必须是一个函数，并且也不能返回一个类似于字符串，或者return 1这样的值，它必须要返回一个对象（通常来说是JSON对象）。