Vue.js之组件及其易错点

「爱情、让人受尽委屈。」 2022-07-13 08:37 218阅读 0赞

今天，在做一个关于vue的demo的时候，发现vue的组件写法出现了错误，刚开始一直没看出来，经过我的一番查阅，才发现了这个错误，希望大家能够引以为戒，不要犯类似的错误！

错误源码：

![这里写图片描述][SouthEast]

在组件里面的数据，我直接跟其他时候一样，直接返回一个json对象，结果发现调试的时候，报如下错误：

![这里写图片描述][SouthEast 1]

**它的意思是：data这个选项必须是一个函数！**

接着，我把它改成了一个函数，如下：

![这里写图片描述][SouthEast 2]

调试后，**发现还是报错 ！**

![这里写图片描述][SouthEast 3]

**它提示我说：data函数必须返回一个对象！而我返回的却是一个字符串！**

于是，我改成了返回一个json对象：

![这里写图片描述][SouthEast 4]

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

现在结果终于正确啦！

![这里写图片描述][SouthEast 5]

--------------------

## 总结： ##

Vue组件里面放的数据必须是一个函数，并且也不能返回一个类似于字符串，或者return 1这样的值，它必须要返回一个对象（通常来说是JSON对象）。

[SouthEast]: /images/20220713/f658aace86484d89927fe2a088a8e71b.png
[SouthEast 1]: /images/20220713/46b486de173649bb9f8f001da094bedd.png
[SouthEast 2]: /images/20220713/b33e04aa1957477ab9d3650b29fee3e0.png
[SouthEast 3]: /images/20220713/81cf0b700cd24b13888a8f7ea6e793a8.png
[SouthEast 4]: /images/20220713/a613d60714dc45a49300ac458214dbcd.png
[SouthEast 5]: /images/20220713/ee424b6770cb458db32c0d07f347f79e.png