Vue.js之组件及其易错点

来源：互联网发布：服装盘货软件编辑：程序博客网时间：2024/05/07 21:08

今天，在做一个关于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对象）。

0 0