1.什么是组件化
针对前端 ui 的一种对应关系，把前端的业务分成多个组件单独管理
2.组件化思想
组件化思想让开发者能开发出1个个独立课复用的小组件来构造应用
每1个应用都可以抽象成1个组件树
尽可能将页面分成小且可复用的组件，可以让代码更方便组织和管理，扩展性也更强
3.组件化好处*
-组件是独立和可复用的代码组织单元，组件系统是 vue 核心特性之一，让开发者使用小型、独立和通常可复用的组件构建大型应用
-组件化开发能大幅度提高应用开发效率、测试性、复用性等
-能让 web 前端代码实现 "高内聚、低耦合"，使前端开发过程变成搭积木的过程
4.组件基本使用
-定义组件
const Login = {
template: ``,
};
// 不常用
const Login = Vue.extend({
template: ``,
});
-注册组件
// 全局注册
Vue.component("组件名称", 组件的返回值);
// 局部注册
new Vue({
components: {
组件名称: 组件的返回值,
},
});
-渲染组件
// 组件名作为标签直接渲染
// 动态组件 通过 is 属性设置具体渲染那个组件，一般用于组件的切换
<component :is="组件名"></component>
5.组件中的 data 为什么是1个 function
防止多个组件实例共用1个data，产生数据污染。函数形式会开辟新的内存空间，返回全新的data对象
6.动态组件 异步组件
// 动态组件
<component :is="组件名"></component>
// 异步组件
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
7.组件通信
- 父传子
1.在渲染的子组件上使用 v-bind 的方式传递父组件的数据
2.在子组件中使用 props 接受传递的数据
ps:
props 的对象写法可以约束传递的数据类型，设置默认值
props 是只读的，不能被修改
-子传父
1.在渲染的子组件使用 v-on 监听子组件的自定义事件 调用父组件的函数
2.在子组件中使用 $emit 的方式发送自定义事件，发送的同时可以传递子组件的数据
- 兄弟组件
__ 事件总线
// 1.创建1个空的 vue 实例
// main.js
Vue.prototype.$EventBar = new Vue()
// 2.在组件 b 中使用 $emit 发送自定义事件，发送同时可以传递数据
methods: {
sendMsg() {
$EventBar.$emit("aMsg", '来自A页面的消息');
}
}
// 3.在组件 a 中使用 $on 的方式监听自定义事件
mounted() {
$EventBar.$on("aMsg", (msg) => {
// A发送来的消息
console.log(msg);
});
}
- 爷孙传值
$attrs、$listeners
- 跨多组件传值
provide、inject
- $refs、$parent、$root
const child = {
template: `
<div>
<slot name="left">
left
</slot>
<slot name="middle">
middle
</slot>
<slot name="right" :msg="'子组件的数据'">
right
</slot>
</div>
`,
data(): {
return {
childmsg: '666'
}
},
created(): {
// 直接获取父组件数据或函数
console.log(this.$parent.msg) // hello vue
}
};
<child ref="childRef"></child>
new Vue({
el: "#app",
data: {
msg: "hello vue",
},
components: {
child,
},
mounted: {
// 通过ref获取子组件数据或函数
console.log(this.$refs.childRef.childmsg) // '666' --ref指向组件实例
}
});
