Vue.js之组件及其易错点

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

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

相关文章
|
19天前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
|
22天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
65 0
|
23天前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
23天前
|
JavaScript 前端开发
[译] 复用 Vue 组件的 6 层手段
[译] 复用 Vue 组件的 6 层手段
|
2天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
|
23天前
|
JavaScript API
vue 批量自动引入并注册组件或路由
vue 批量自动引入并注册组件或路由
|
2天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
19天前
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
|
23天前
|
JavaScript 前端开发 Serverless
[译] VueJS 中更好的组件组合方式
[译] VueJS 中更好的组件组合方式
|
23天前
|
JavaScript
Vue3相关组件项目依赖依赖版本信息
这篇文章展示了一个Vue 3项目中使用的组件和库的依赖版本信息,包括`ant-design-vue`、`swiper`、`vue`、`vue-router`等,以及开发依赖如`vite`、`vue-tsc`、`eslint`等。
Vue3相关组件项目依赖依赖版本信息