当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > vue >内容正文

vue

三十六、深入vue.js组件component（上篇） -凯发ag旗舰厅登录网址下载

发布时间：2024/10/8 vue 12 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了三十六、深入vue.js组件component（上篇）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author：runsen
@date：2020/6/15

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾（作者：runsen ）

作者介绍：runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，python， java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在csdn。决定今天比昨天要更加努力。我的征途是星辰大海！

今天我们来学习vue.js的component组件。在vue中，组件是可复用的 vue 实例，且带有一个名字。每个页面都是以组件树的方式来展示其内容：

比如说，一个登陆页面有登录框和背景两个组件，登录框又由用户名输入框组件和密码输入框组件组成。而模块的划分，则是这个系统有三个模块，分别是登陆注册，用户管理和业务管理。

本文将以具体实例讲解以下几个有关vue.js组件的知识点：

① 如何注册一个组件
② 组件内数据

文章目录

注册全局组件
局部组件
组件内数据

注册一个全局组件语法格式如下：

vue.component(tagname, options)

tagname 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

下面实现了

<!doctype html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title> </head><body><div id="app"><runsen></runsen></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>vue.component("runsen",{template:''})new vue({el:'#app'}) </script> </body> </html>

局部组件的写法和全局组件差不多。
唯一不同就是：局部组件要写在vue实例里面。

<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle> head><body><div id="app"><runsen>runsen>div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script>var runsen = {template: ''}new vue({el:'#app',components:{'runsen':runsen}}) script> body> html>

第二个写法：把组件的布局写在 html 代码里。

<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle> head><body><div id="app"><runsen>runsen>div><template id="maoli">、<h1>runsen!h1>template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script>new vue({el:'#app',components:{'runsen':{// 引用 html 里需要用到的组件 idtemplate: '#maoli', }}}) script> body> html>

上面的结果和上图一样。

很多时候component 组件需要传递数据，其实都是一样用data

<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle> head><body><div id="app"><my>my>div><template id="maoli"><div><h1>runsen!h1><p>{{ msg }}p>div>template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script>new vue({el:'#app',components:{'my':{// 引用 html 里需要用到的组件 idtemplate: '#maoli', data:function() {return {msg:"都2020了，你还不会玩vue？赶紧上车，来不及解释!!!!!"}},}}}) script> body> html>

上面这种写法，浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会在页面中展示的。直到它被 js 中的 vue 调用。

在 html 中，template 标签一定要有一个 id，因为通过 id 是最直接被选中的。
data 和 methods 等参数，全部都要放到 vue 实例里面写。

都2020了，你还不会玩vue？赶紧上车，来不及解释！！！

如果本文对你有帮助，大家可以点赞转发一波，有错误大家可以评论指出，感谢！

大家继续加油，未来可期！runsen的征途是星辰大海！

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的三十六、深入vue.js组件component（上篇）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

组件
js