Vue-第七天vue.js使用组件二

Posted 2021-05-01 一步一步似爪牙

好想睡个安静的觉，然后认真地清醒一天，哪怕一天。

各种事，会让你迷失自己，迷失在失去自我的泥潭里，慢慢冲进深渊。

你可以做一只美妙的程序员，细心coding；也可以选择做一直美丽的金丝猴，尽情舞蹈。世界是自己的，找一颗宁静一下，找找自己，那点时刻是最美好的。

在这点时间里，我再耐心地分享一下上次学习到的组件这块的知识，因为组件是很vue中间很重的一部分，我们一定要耐心专研，才可能达到想要的效果。

一、 细说定义一个组件的步骤

直接上DEMO：

在图中的这个demo中，

1、先是用template标签定义了一个html模版

2、然后使用组件构造器Vue.extend()方法声明了一个组件对象，在这个组件中，包含了一个template的属性，其传值根据id选择器取值的template HTML模版的内容。

3、使用Vue.component()注册了上面定义的组件，并指定组件的标签

4、在Vue实例挂载的元素中使用上面定义的组件的标签，即可使用组件中模版定义内容。

二、 局部注册与全局注册差别

在上面的demo中，我是使用Vue.component直接注册了一个全局的组件。现在举一个例子，局部注册一个组件。

demo：

实现的效果：

从例子中可以看出来，定义一个全局的组件与一个局部的组件，差别在于：

定义全局变量在Vue.component()中定义，定义局部变量在创建的vue实例中定义。局部定义的组件只能在定义的vue实例挂载的元素范围内使用。

三、 定义父子组件

页面与页面之间嵌套关系是很正常的事，在一个模块中，嵌套另一个模块也是很正常的事，因此，父子组件，也是存在的。下面简单举个例子，简单说一说父子组件是怎么实现及调用的。

直接上demo：

html部分：

js部分：

实现效果：

点击“显示子组件的数据”，会先后弹出：

'child component 111111'、'child component 222222'。

解析：

1、定义两个组件的模版，id分别为child-component1、

child-component2。并定义一个id为

parent-component的父组件模版，并在父组件模版中调用自组件定义的标签。

2、使用Vue.component()注册父组件，并再父组件中调用components属性注册两个子组件。在父组件中methods属性中定义一个方法，方法中，通过vue示例中的vm.$children属性访问子组件中的data--msg的值。

3、创建一个vue实例，在vue实例中挂在的el元素内引用父组件定义的标签，即可以引用父组件，已经实现父组件中嵌套的子组件。

两个组件之间，最繁琐的还在于传值，下一次，我们一起学习一下组件之间传值的问题。