回顾
```
监听器：
{
data:{
msg:"",
obj:{
a:10,
b:20
}
},
watch:{
msg(newVal,oldVal){
// 只要 data中 msg 变化了，此函数自动触发
},
'obj.a'(newVal,oldVal){
// obj a属性值变化 触发
},
obj:{
handler(newVal,oldVal){
// 只要obj任意一个属性的值变化，都会触发
},
deep:true
}
}
}
计算属性
使用一个值，需要处理一下才能使用
{
data:{
msg:'hello world'
},
computed:{
msg2(){
return this.msg.split('').reverse().join('');
// 简写 相当于只用get
},
msg3:{
get(){
return this.msg.split('').reverse().join('');
},
set(val){
// 计算属性最好不要去修改
// 如果要修改，计算属性，需要些 set，在set中去修改依赖
this.msg = val;
}
}
}
}
ref:获取dom
实例的 $refs属性是一个对象
{
box:div//dom对象
}
this.$refs['box']
组件：
页面的独立 的区域
全局
let CommonHead = {
template:`
`
data(){
return {
}
},
methods,
watch,
computed
}
Vue.component('组件名 推荐大驼峰或者 -',CommonHead)
局部
let CommonHead = {
template:`
`
data(){
return {
}
},
methods,
watch,
computed,
components:{
组件名:{
template,
data,
watch,
....
}
}
}
```
## 组件间的关系
由于组件间的嵌套使用，组件互相有了关系 如：父子、兄弟...
## 不同组件之间的通信
### 父向子通信
props通信
```
子组件中 新增props属性，属性值，时数组，数组中 放 待接收参数列表（定义参数名字）
注意：
1，props中定义的参数名会自动 编译成 实例（组件），属性（同data中的属性以及计算属性中的属性）
2，props名字不能和data中以及methods和计算属性， 不能重名的
// 子组件
let CommonTitle = {
props:['title','arr'], //properties props 父向子 传入的数据列表
template:`
这是标题
{{ title }}
{{item}}
`
}
// 父组件
let Home = {
template:`
home页内容
`,
data(){
return {
title:"我是home页111"
}
},
components:{
CommonTitle
}
}
总结：
props值是一个数组
问题？
没有限制 props 传入的数据类型 （存在风险）
```
props验证
对于props类型做了验证
```
type
required
default
props:{
propa:String, //只验证type(类型)可以直接写类型预定义的值
propb:[String,Number] //type是多个类型中的一个 []
propc:{
type:String,
required:true
},
propd:{
type:String,
default:'xxx'
}
}
注意：
1，props中定义的参数名会自动 编译成 实例（组件），属性（同data中的属性以及计算属性中的属性）
2，props名字不能和data中以及methods和计算属性， 不能重名的
3，如果默认值是 数组或者对象，需要一个函数返回这个默认值
4，props能否被改变 props保持 单向的 父向子 （子不能改变），易于维护
type的值：
String
Number
Boolean
Array
Object
Date
Function
Symbol
```
### 子向父通信
自定义事件 触发
```
子组件中
this.$emit("自定义事件名",携带参数)
在父组件中
<子组件
@自定义事件="fn"
>
{
methods:{
fn(msg){ //msg 携带数据
// 当子组件的 $emit触发时 自动调用
}
}
}
```
### 兄弟组件传参
```
事件总线
Vue实例
$emit("自定义事件",携带参数)
$on("监听的事件名",fn)
注意：
谁emit就由谁on监听
利用第三方实例，
emit
和
on监听
```
## 另外三种不常用通信 （用于面试）
### ref 通信
```
在父组件的
this.$refs.child 就是这个子组件实例
注意：
不建议直接通过ref操作子组件
```
### $children $parent
```
$children 组件中 获取当前组件所有的子组件 （数组）
$parent 获取当前组件的父组件
```
### provide inject
```
父组件中
{
provide:{
msg:'1234',
num:12
},
data,
template,
methods
}
子组件中
{
inject:['msg','num']
// 挂载到了 子组件的 实例的 属性上 注意不要和data或者props或者计算属性或methods重名
}
```
## 插槽
占位符
实现 组件，在不同父组件中使用，内部可以有不一样 代码块（布局（html））
```
子组件
{
template:`
我是子组件
下面结构在不同的组件中使用 不一样
}
在父组件中
template:`
home页内容
我是插槽对应的内容
aaa
`,
具名插槽 命名插槽
实现 可以在子组件中 定义多个插槽，且每个插槽，有自己名字（在传入代码时，指定传入哪个插槽）
子组件
{
template:`
我是子组件
下面结构在不同的组件中使用 不一样
`
}
父组件
{
template:`
home页内容
我是小明