vue从入门到学会第六天--------组件上

2021年09月15日 阅读数:1
这篇文章主要向大家介绍vue从入门到学会第六天--------组件上,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、前言

本文所讲到的组件能够说是vue的核心内容,只有学会了组件的使用,才算懂得如何使用vue,组件它是能够用来自定义标签的和属性的,咱们能够经过一个组件实现不少功能,组件他能够说是一个封装的集合。下面让咱们一块儿来看看如何使用组件吧。html

 

2、组件注册

咱们主要从两大类来介绍组件的注册。vue

1.全局注册

全局注册通常能够使用三种方法来实现。node

1). Vue.component直接注册

vue从入门到学会第六天--------组件上_html

2).Vue.extend搭配Vue.component进行注册

vue从入门到学会第六天--------组件上_vuejs_02

以上两种组件注册方法,在填写字符串模板的时候,是不容许出现两个根元素的。固然你也能够挂载在类名为aa的div,以下:编程

new jj().$mount('.aa')
new jj({el:'.aa'})
document.getElementsByClassName('aa')[0].appendChild(new jj().$mount().$el)

以前咱们想要使用vue中的语法将class或者id给el属性的过程,这个是自动挂载;而若是咱们使用$mount的话就至关于手动挂载了。手动挂载的好处是能够进行延迟加载vue语法。只要不给el属性就没法进行自动挂载。app

3).template搭配Vue.component进行注册

vue从入门到学会第六天--------组件上_html_03

4).x-template搭配Vue.component进行注册

vue从入门到学会第六天--------组件上_html_04

2.局部注册

1).components

vue从入门到学会第六天--------组件上_html_05

咱们还能够将字符串模板封装并给一个变量,以下:dom

vue从入门到学会第六天--------组件上_vuejs_06

2).componet占位符搭配components

vue从入门到学会第六天--------组件上_html_07

这里有个is,它是用来表示当前是用的组件名的。这就是咱们常常提到的动态组件了。不过因为切换componet存在着建立销毁,所以为了节约资源,咱们能够使用keep-alive,以下:ide

<keep-alive>
       <component :is="jj"></component>
</keep-alive>

 

3、嵌套组件

vue从入门到学会第六天--------组件上_html_08

4、单文件组件

咱们能够将一些组件写好了而后放到一个vue文件中,而后导入进来,这样也能使用咱们的自定义组件了,不过这种状况须要咱们配置JavaScript运行环境,好比nodejs和vuecli才能实现哦,这里咱们就先放着之后再来说。spa

 

5、总结

本文小编主要和你们讲到了一些关于组件的注册和使用方法,以及组件的挂载,咱们能够得知,组件不挂载是不会生效的,所以要想组件显示在页面上必须挂载到相应的dom元素上。对本文源码感兴趣请关注"简易编程网"并回复vue6便可获取。component