本文深入探讨Vue.js的组件化开发，详细解析组件的注册步骤，包括全局和局部组件的创建。文章还介绍了父组件与子组件的关系，以及如何通过props和自定义事件实现通信。此外，还介绍了Vue的slot机制，阐述了插槽在扩展组件功能中的重要作用。通过实例展示了具名插槽和作用域插槽的使用，帮助开发者更好地理解和运用Vue的组件系统。
3.2.注册组件步骤解析
这里的步骤都代表什么含义呢？
1.
Vue.extend()：
调用
Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入
template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。
2.
Vue.component()：
调用
Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
3.组件必须挂载在某个Vue实例下，否则它不会生效。（见下页）
我们来看下面我使用了三次< my-cpn>< /my-cpn>
而第三次其实并没有生效：
4.1.全局组件和局部组件
当我们通过调用Vue.component()注册组件时，组件的注册是全局的
这意味着该组件可以在任意Vue示例下使用。
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件
4.2.父组件和子组件
在前面我们看到了组件树：
组件和组件之间存在层级关系
而其中一种非常重要的关系就是父子组件的关系
我们来看通过代码如何组成的这种层级关系：
父子组件错误用法：以子标签的形式在Vue实例中使用
因为当子组件注册到父组件的components时，Vue会编译好父组件的模块
该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了）
< child-cpn>< /child-cpn>是只能在父组件中被识别的。
类似这种用法，< child-cpn>< /child-cpn>是会被浏览器忽略的。
4.3.注册组件语法糖
在上面注册组件的方式，可能会有些繁琐。
Vue为了简化这个过程，提供了注册的语法糖。
主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替。
语法糖注册全局组件和局部组件：
//1.注册全局组件的语法糖
Vue.component(‘my-cpn’,{
template:’
组件标题
组件正文内容,今天真幸福!
’
})
//2.注册局部组件
let app = new Vue({
el:‘#app’,
components:{
‘my-cpn1’:{
template:‘
},
‘my-cpn2’:{
template:‘
}
}
})
//1.创建组件构造器
const myComponent = Vue.extend({
template:’
组件标题
组件正文内容,今天真幸福!
’
})
//2.注册全局组件
Vue.component(‘my-cpn’,myComponent);
//1.创建组件构造器
const myComponent = Vue.extend({
template:’
组件标题
组件正文内容,今天真幸福!
’
})
let app1 = new Vue ({
el:‘#app1’,
components:{
‘my-cpn’:myComponent
}
})
4.4.模板的分离写法
刚才，我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。
如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。
Vue提供了两种方案来定义HTML模块内容：
使用< script>标签
使用&
最低0.47元/天 解锁文章
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
