组件中（自定义事件，双向绑定，插槽，深层组件传值，动态组件）

---

前言

此文章紧接上篇组件的基本使用

---

一、自定义事件

使用步骤

1、给组件绑定自定义事件

<mt-btn @myclick="change"></my-btn>  //myclick是自定义事件


<my-thumbnail @myclick="count+$event.step></my-thumbnail> //内联样式

2、自定义事件会传输到子组件内部，需要使用emits接收

emits:['myclick']

3、在子组件内部的某个节点上绑定传统事件，触发自定义事件

this.$emit('myclick',{msg:'hello'})

子组件传值到父组件

二、组件的双向绑定

1.定义

当你在组件上使用v-model时，vue自动向你的子组件发送了props（modelValue）属性emits（updata：moveValue）自定义事件。

1>发送的props属性是：modelValue（v-model=“值”）
2>发送的emits事件是：updata:modelValue

2.自定义属性的名称是可以修改的

<my-input v-model:age=""info></my-input>
//子组件
props:{
	age:null;
}
emits:["updata:age"]

3.修饰符

1>当你给组件的v-model使用了修饰符之后，那么，将会传递一个对象到子组件之中——modelModifiers;
此属性是由你的修饰符组成的（值为true）的对象

2>对于带参数的v-model绑定，生成的prop名称将为arg + “Modifiers”

v-model:age.number = "age";

props:[age,ageModifiers]

三.插槽

1.在子组件中开辟插槽

app.component('my-btn',{
	template:`
		<button class="btn">
			<slot></slot>
		</button>
	`
})

2.插入内容

1、字符串

<my-btn>登录</my-btn>

2、DOM

<my-btn>
	<b>登录</b>
</my-btn>

3、组件

<my-btn>
	<my-icon></my-icon>
</my-btn>

3.插槽默认值

app.component('my-btn',{
	template:`
		<button class="btn>
			<slot>按钮</slot>
		</button>
	`
})

4.具名插槽

1、带有名字的插槽

<slot name="名字"></slot>

2、插值到具体位置

<template v-slot:名字>插入的内容</template>

注意：v-slot简写：#名字

四.深层组件传值

1.在祖父级组件上传值

provide:{
	属性：值；
	...
}

2.在儿孙级组件注入数据

inject:[属性...]

五.动态组件

<component is='组件名称'></component>

要缓存组件？

<keep-alive>
	<component :is='名称'></component>
</keep-alive>