1.组件通信***
1.1父传子:父组件的数据给了子组件
理论：
1.父组件通过自定义属性传值
<v-child :msg="name"></v-child>
2.子组件通过props接收
export default {
props:["msg"]
}
props验证
props: {
tel: {
//数据类型约束
type: String,
// 必填项
required: true,
},
msg: {
type: String,
// 默认值
default() {
return "王昭君";
},
},
},
1.2子传父：子组件要修改父组件的值
父组件绑定自定义事件
<v-child @asd="isshow=false" @cname="change($event)"></v-child>
子组件通过$emit()触发自定义事件：
changeName(name){
//通知父组件改名字
// $emit(‘自定义事件名称’,'参数') 参数会被传到自定义事件的event,父组件接收。
this.$emit("cname",name)
}
注意：
1.父传子，父组件传递数据给子组件，默认是父变，子变；子变，父不变，还报错；
2.间接修改：子组件想要修改父组件的值，使用子传父 ；
3.3.直接修改：父变，子变，子变，父变，还不报错 ,传递json
1.3 非父子
1.EventBus 了解
1.main.js中
// 1.vue原型上加一个EventBus,值是vue对象
// 所有组件都可以使用该变量，而且他还具备$on() $emit()
Vue.prototype.EventBus=new Vue();
2.触发自定事件
send(){
//触发了sendA事件
this.EventBus.$emit("sendA",this.aData)
}
3.绑定事件
mounted(){
//绑定事件
this.EventBus.$on("sendA",(e)=>{
this.a=e
})
},
2.ref
1.获取DOM节点
注意：因为节点最早在mounted的时候创建完成，所以使用ref一定要在mounted之后
<div class="red" ref="red"></div>
toBlue() {
let div = this.$refs.red;
div.style.background = "blue";
},
2.父组件获取子组件实例，从而取到子组件的数据和方法
<v-child ref="child"></v-child>
click(){
//调用子组件的属性
console.log(this.$refs.child.name);
//调用子组件的方法
this.$refs.child.changeName("鲁班")
}
3.scoped
样式局部作用：只在当前文件中起作用
<style scoped>
h3{
color:blue;
}
</style>
4.is
1.is可以解决标签固定搭配问题
<ul>
<li is="v-one"></li>
</ul>
2.动态组件
<button @click="name='v-one'">one</button>
<button @click="name='v-two'">two</button>
<!-- 2. :is 动态组件 -->
<div :is="name"></div>
5.脚手架上使用动画
1.下载
npm i animate.css --save
2.main.js引入
import "animate.css"
3.使用
<transition
enter-active-class="animate__animated animate__bounceInLeft"
>
<div :is="name"></div>
</transition>
6.slot插槽
1.匿名插槽
<!-- 1.匿名插槽：所有嵌套的内容都会放到匿名插槽中 -->
<slot></slot>
2.具名插槽
<!-- two.vue -->
<div class="box">
<!-- 2.具名插槽 -->
<slot name="shang"></slot>
<h3>this is two</h3>
<slot name="xia"></slot>
</div>
<v-two>
<ul slot="shang">
<li>嘻嘻嘻</li>
<li>哈哈哈</li>
</ul>
<ol slot="shang">
<li>手机</li>
<li>电脑</li>
</ol>
</v-two>
3.作用域插槽
如果父组件使用子组件，子组件结构有一部分不确定，而且不确定的这部分还需要数据，那么就需要使用作用于插槽。
子组件：
<template>
<div class="box">
<h3>作用域插槽--开始了</h3>
<!-- 1.使用slot,传递数据 -->
<slot :d="arr" ></slot>
<h3>结束了</h3>
</div>
</template>
父组件：
<!-- 3.作用域插槽 -->
<v-three :arr="arr1">
<!-- 2.传递给slot的内容是template,template通过v-slot|slot-scope可以接受slot传递的数据 -->
<template v-slot="props">
<ul>
<li v-for="item in props.d" :key="item.id">{{item.name}}</li>
</ul>
</template>
</v-three>
<v-three :arr="arr2">
<template slot-scope="props">
<ol>
<li v-for="item in props.d" :key="item.id">{{item.name}}</li>
</ol>
</template>
</v-three>
7.混入
1.将多个组件的数据、方法、生命周期等提取到一个文件中
export default {
data() {
return {
isshow: false,
};
},
methods: {
show() {
this.isshow = true;
},
hide() {
this.isshow = false;
},
},
mounted(){
console.log("toggle");
}
}
2.组件使用
<script>
import toggle from "./toggle"
export default {
mixins:[toggle]
};
</script>
8.缓存组件
<!-- keep-alive 加上了之后，mounted 和beforeDestroy不会再重复触发 -->
<!-- keep-alive 可以重复触发activated（激活钩子函数） deactivated（失活的钩子函数） -->
<keep-alive>
<v-one v-if="show"></v-one>
<v-two v-else></v-two>
</keep-alive>
特殊的生命周期
activated（激活钩子函数） deactivated（失活的钩子函数）