Vue.js之组件及其易错点

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

Vue.js之组件及其易错点相关推荐

Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
html中的父子通信代码,Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...
Vue.js 定义组件模板的七种方式
转载自 Vue.js 定义组件模板的七种方式在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串模板字面量 x-template 内联模板 render ...
360奇舞团钟恒：选用Vue.js进行组件化开发，我们遇到了哪些坑？
责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_ ...
Vue.js教程-组件化开发
Vue.js教程-组件化开发前言 Vue组件化什么是组件化 Vue单页面开发的解释组件化思想组件的使用原理实际开发中的使用-父子组件父子组件传递数据父传子-props用法子传父-th ...
两个读书笔记：springboot+vue.js分布式组件全栈开发训练营 + 大数据开发基础
(springboot+vue.js分布式组件全栈开发训练营原文在notion中, 大数据开发在思维导图中, 这个博客只是保存, 无法阅读. ) what is different between s ...
为什么要用Vue.js的组件化开发
那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子.这 ...
Vue.js 之组件-监听子组件事件
1.监听子组件事件前面介绍了父组件如何通过 prop 向子组件传递数据,反过来,子组件如何向父组件通信呢? 在 Vue.js 中,这是通过自定义事件来实现的,子组件使用 $emit() 方法触发事件 ...
Vue.js分页组件实现：diVuePagination
为什么80%的码农都做不了架构师?>>> 完整版下载地址:https://gitee.com/dgx/diVuePagination 完整版演示地址:http://dgx.gi ...

Vue.js之组件及其易错点

总结：

Vue.js之组件及其易错点相关推荐

最新文章

热门文章