Vue.js之组件及其易错点

最新推荐文章于 2024-06-27 09:18:19 发布

qinjianhuang

最新推荐文章于 2024-06-27 09:18:19 发布

阅读量2.7k

点赞数

分类专栏：前端学习之路文章标签： Vue-js 组件模板函数 json

本文链接：https://blog.csdn.net/sinat_35512245/article/details/53981557

版权

前端学习之路专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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