专栏首页机器学习从入门到成神Vue.js之组件及其易错点

Vue.js之组件及其易错点

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/article/details/53981557

今天,在做一个关于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 条评论
登录 后参与评论

相关文章

  • 深入理解并发/并行,阻塞/非阻塞,同步/异步

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

    大黄大黄大黄
  • 一道快速排序题的解析

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

    大黄大黄大黄
  • 各大公司Java后端开发面试题总结

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

    大黄大黄大黄
  • vue的组件通讯

    1.1 简单情况下我们可以通过使用一个空的Vue实例作为中央事件总线,(这里也可以使用app实例,而不需要新建一个空Vue实例)

    java攻城狮
  • React高级组件精讲

    高阶函数是以函数为参数,并且返回也是函数的的函数。类似的,高阶组件(简称HOC)接收 React 组件为参数,并且返回一个新的React组件。高阶组件本质也是一...

    Javanx
  • Vue 基础

    输入框数据发生变化, 则data中数据也发送变化. data 中定义变量发送变化则页面数据也跟着变

    solate
  • 掌握此心法,可以纵横 Numpy 世界而无大碍

    检查一个 ndarray 数据的维度和大小,分别用 ndim 和 shape 属性。

    崔庆才
  • 《全局光照技术》— 原来图形技术的世界美如她所创建的世界

    秦春林,从事游戏开发已有7个年头,担任Game Engineer(游戏开发工程师),主要研究方向是引擎开发和图形渲染。物理专业出身的我属于半路出家,一次偶然的机...

    博文视点Broadview
  • 由PHP小tip引发的思考

    前段时间看到有关于CTF中PHP黑魔法的总结,其中有一段只有介绍利用方法但是没有详细介绍为什么,我想了一下,思考如下,如果不对,请各位大佬多多指正~ 原话如下:...

    企鹅号小编
  • 页面提高性能利器_懒加载

    用户5521279

扫码关注云+社区

领取腾讯云代金券