@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 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

下面实现了<runsen>

<!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:'<h1>runsen</h1>'})new Vue({el:'#app'})
</script>
</body>
</html>

局部组件

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

<!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>var Runsen = {template: '<h1>runsen!</h1>'}new Vue({el:'#app',components:{'runsen':Runsen}})
</script>
</body>
</html>

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

<!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><!--自定义组件结构--><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

<!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"><my></my></div><!--自定义组件结构--><template id="maoli"><div><!-- 注意必须在div里面不然报：Component template should contain exactly one root element --><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的征途是星辰大海！

三十六、深入Vue.js组件Component（上篇）相关推荐

三十七、深入Vue.js组件Component（下篇）
@Author:Runsen @Date:2020/7/4 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
（三十六）Vue解决Ajax跨域问题
文章目录环境准备 vue的跨域问题 vue跨域问题解决方案方式一方式二上一篇:(三十五)Vue之过渡与动画下一篇:(三十七)vue 项目中常用的2个Ajax库环境准备首先我们要借助axi ...
Vue.js学习系列（四十二）-- Vue.js组件
2019独角兽企业重金招聘Python工程师标准>>> 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.组件系统让我们可以用独立 ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
三十三、深入Vue.js语法（上篇）
@Author:Runsen @Date:2020/6/11 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
前端入门学习笔记（三十五）vue.js入门（三）条件 v-if 与循环 v-for，v-for 中 in 和 of 的区别
1.v-if v-if相当好理解,这里我就只贴实例代码了 <div id="app"><p v-if="true">现在你看到我了< ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...

三十六、深入Vue.js组件Component（上篇）

文章目录

注册全局组件

局部组件

组件内数据

三十六、深入Vue.js组件Component（上篇）相关推荐

最新文章

热门文章