标签：vue runoob 标签 component Part.21 调用 组件

本公众号 的系列文章《跟热饭一起学习vue吧》，本文会采用非常土，非常low的语言，让读者学习并立即上手即可使用vue去写前端页面。简单生动，由浅入深。那么，就一起开始学习吧，体验一把又土又油腻的教程吧~

别忘了先打开我们的菜鸟编辑器当做草纸吧：右键左下角“阅读原文”在新窗口中打开链接，会打开在线编辑器。

组件 Component

提到组件，估计大家都大概知道是什么意思，就是一个能复用的模块。

那么在前端的vue里，这个组件是什么意思呢？

其实就是像一个小工厂一样，源源不断的生产出来指定的元素标签，让你插入到页面上。

主要是有俩部分：

1.注册（也就是声明，创建这个组件）

2.调用（也就是dom层中在你需要插入这个组件的时候，调用即可）

如何注册

在script里，找个地方，写上就行。

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
</script>

如上代码所示，调用vue.component 即可创建一个 组件，组件名叫runoob，这个是你随便起的。内部用大括号包裹，其中第一个属性template就是实际的dom元素标签内容了。代码中的就是个h1标题标签，内容是写死的文案：”自定义组件！“

如何调用

只需要在你希望的地方把你的组件名字 当成元素标签 写上即可实现插入，但是必须在vue的元素区域内：

<div id="app">
 <runoob></runoob>
</div>

完整示例

然后我们再来学习下局部组件

局部组件，就是说这个组件不能让你随便用了，必须在这个实力中调用才行，其他的vue构造器用不了，这个runoob（你自己取的名字）

简单解释下怎么写：

1.你在vue构造器外写个组件模板，注意这并不是组件，只是可以被组件调用的模板而已。

2.你再vue构造器中写个components属性，里面写个组件名字，并调用外面的那个组件模板

3.然后在dom中当前vue的作用范围内，可以用组件名字标签化了来插入具体的元素内容了。

好了本节课就到这里，怎么样，是不是感觉很简单？？？感觉简单的话，就立马关注下本公众号吧~ 进群学习请加v：qingwanjianhua

标签：vue,runoob,标签,component,Part.21,调用,组件
来源： https://blog.csdn.net/qq_22795513/article/details/120092218

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。