1. 概述
(1)组件能够扩大HTML元素，外部封装了能够复用的HTML、CSS、JS代码片段。
(2)因为组件是可复用的Vue实例，所以它们与new Vue接管雷同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
(3)组件相似于vue实例，组件外部有template属性，用于指定模板。
vue实例外部有el属性，用于指定模板。
2. 组件的特点
(1) 组件能够进行任意次数的复用
(2) 组件的data必须是一个函数，确保每个实例能够保护一份被返回对象的独立的拷贝，也就是任何一个组件的扭转不会影响到其余组件。
3. 组件定义
let component = {
data() {
return {
//返回对象值的惟一拷贝，保障复用的组件外部数据不会相互影响
msg: "我是组件的数据"
}
},
template: `
<div>
<p>我是组件</p>
<h1>{{ msg }}</h1>
</div>
`
}
4. 组件注册
(1) 全局注册的组件，能够在任意vue实例或者组件外部应用
(2) 部分注册的组件，只能在以后注册的实例或者组件外部应用
(3) 相似于js中的全局变量、局部变量
1、全局注册
Vue.component('my-com', component);
如果一个组件被多个其余组件调用，用全局注册较好。
2、部分注册
如果一个组件在一个实例或者组件外部被屡次调用，用部分注册较好。
new Vue({
el: "#app",
data: {},
components: {
"my-com": component
}
})
5. 组件交互（通信）
(1) 父组件向子组件传参
父组件应用prop属性，向子组件传参。
<div id="app">
<my-com :title="title" msg="hello"></my-com>
</div>
动静传参
没有：传递的常量字符串
有：传递boolean, number, 对象, 数组, 变量
子组件接管参数
let component = {
props: ["title", "msg"]
}
props校验
let component = {
props: {
title: {
type: String, // 验证数据类型
required: true, //该参数必须传递的参数
//根本数据类型间接写在default前面
default: "你好", //以后参数的默认值
// 援用数据类型，应用工厂函数的模式返回一个对象或者数组
default(){
return {}
}
validator(val){
//自定义的验证器
return val.lenth > 3 ;
}
}
}
}
(2) 子组件向父组件传参
<div id="app">
<my-com @son-handler="fatherHandler" msg="hello"></my-com>
</div>
let component = {
data(){
return {
comMsg: "我是子组件数据"
}
},
template:`
<div>
<button @click="clickHandler">发送事件</button>
</div>
`,
methods: {
clickHandler(){
clickHandler(){
this.$emit("son-handler", this.comMsg)
}
}
}
}
new Vue({
el: '#app',
data: {
fatherDate: ''
},
methods: {
fatherHandler(val){
//val 就是子组件发送事件时，携带的参数this.comMsg
this.fatherDate = val
}
},
components: {
myCom: component
}
})
(3) 单向数据流
父级的prop数据的更新，会向下流动到子组件中，反过来不行
父组件可能批改子组件中的数据，而子组件不能间接批改父组件中的数据
作用：
避免子组件意外变更状态，会影响父组件中的状态或者数据。
6. 插槽
(1) 一般插槽
<my-com> hello vue </my-com>
let com = {
template: `
<div>
<slot></slot> //默认插槽
</div>
`
}
(2) 具名插槽
<my-com>
<template v-slot:header>
我是头部内容
</template>
<template v-slot:default>
<p>你好组件插槽</p>
</template>
<template v-slot:footer>
我是脚步内容
</template>
</my-com>
let com = {
template: `
<div>
<header><slot name="header"></slot></header> //具名插槽
<main> <slot name="default"></slot > </main> // 匿名插槽
<footer> <slot name="footer"> </slot> //具名插槽</footer>
</div>
`
}
(3) 作用域插槽
<my-com>
<template v-slot:header="scope">
{{ scope.msg }} //scope是作用域对象，外部封装了子组件传递上来的msg数据，能够应用对象的解构
我是头部内容
</template>
<template v-slot:default>
<h3>你好组件插槽</h3>
</template>
<template v-slot:footer>我是脚步内容
</template>
</my-com>
let com = {
data(){
return {
msg: "我是组件数据"
}
},
template: `
<div>
<header><slot name="header" :msg="msg"></header>
</div>
`
}
7. 动静组件
(1) 动态组件
<component is="my-com1"><component>
(2) 动静组件
<component :is="current"></component>
发表回复