VUE 组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、VUE 组件 —组件注册

1、组件注册有两种方式

1. 全局注册
   将组件注册到跟实例（跟组件）上，这个组件就是全局组件。全局组件可以被任意组件去使用
   例：
   
2. 局部注册
   将组件注册到某个组件的内部，通过components属性完成，局部组件只能在当前的组件使用
   例：
   
3. 组件中的一些属性
   1-- 组件名
   组件名称有两种风格：
   kebab-case （my-button）（推荐）
   KebabCase （My-Button）
   2-- 组件中的第二个参数的属性

• template 定义组件的结构样式
  注意：组件可以有多个根节点，但是，尽量就一个
• 剩下的属性和VUE实例中可以写的属性一模一样。而且，每个组件都是一个独立的作用域，都会维护自己的状态，不用担心冲突

二、VUE–组件 props

组件提供一个props属性，专门用来接受在使用组件时，写在组件身上的属性（标签属性）的属性（组件内容属性）

1. 基本使用方式

  <my-button></my-button>

注册组件
例：

2. 关于props的数据流向问题

• 通过props可以完成父组件传值到子组件。
  并且这个传值遵循数据的单向流通原则：父组件的值改变，子组件中的值改变
• props 只能读，不能改
• props 用处
  - 动态改变组件的某些值
  - 可以做为初始值使用
  - 可以作为依赖属性去使用
• 关于props传递引用类型数据（对象/数组）的时候
  - 如果在子组件中修改引用类型的某个属性，是允许修改的，因为改某个属性的时候，并没有修改这个指针
  - 所以，传递引用类型的时候，容易造成数据流向的不确定性（不确定性是因为掌握的不够透彻），尽量避免去传递引用类型

3. 关于props的约束

• 类型约束
  - String Number Array Object Boolean

props:{
	bn:[String,Number],
	info:Object
} 

• 属性必填验证（此验证不是验证属性值必填，是验证属性必填）

props:{
	bn:{
		type:null //如果类型上允许任何类型通过，则写null即可
	}
}

• 默认值
  
  效果：
  

• 自定义验证规则

4.非props属性

• 什么是？
  - 没有在组件内通过props接受的属性 -----即非props属性
• 特性
  - 前提：组件必须只有一个根节点
  - 非props属性会自动成为根节点的属性，这种现象叫属性继承
• 经常将哪些属性做成非props属性
  - class style id
• 非props属性可以被禁止继承
  - 如何使用
  在组件内部填写一个属性：inheritAttrs:false
  - 什么情况下禁止继承？
  让非props属性在非根节点生效
  - 在vue实例中，有一个属性：$attrs,这个属性的作用就是接受所有非props属性
  -

<div v-bind="$attrs"></div>// 此对象的属性会自动成为标签的属性

5. 自定义事件

• 自定义事件使用步骤
  - A、 给组件绑定自定义事件
  <my-btn @myclick="change"></my-btn>
  如果使用一段内联逻辑

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

$event 就代表你传递过来的实参

B. 自定义事件会传输到子组件内部,需要使用 emits接受
emits:[‘myclick’]
C. 在子组件内部的某个节点上绑定传统事件，触发自定义事件
this.$emit(‘myclick’, {msg:‘hello’})

• 自定义事件可以完成子组件传值到父组件

6. 组件中的双向绑定

• 当你在组件上使用v-model时，vue自动向你的子组件发送了props（modelValue）属性emits(update:moveValue)自定义事件。
  - 发送的props属性是：modelValue (v-model=‘值’)
  - 发送的emits事件是：update:modelValue
• 自定义属性的名称是可以修改的
  - <my-input v-model:age="info"></my-input>
  - 子组件

props: {
		age:null
	},
	emits:["update:age"]

• 修饰符
  • 当你给组件的v-model使用了修饰符之后，那么，将会传递一个对象到子组件之中 – modelModifiers;
    此属性是由你的修饰符组成（值为true）的对象！
    - 对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + “Modifiers”
    - 例：

v-model:age.number = ‘age’; props:[age,ageModifiers]

三、插槽

1. 在子组件中开辟插槽
   例：

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

2. 插入内容

• 可以是字符串

<my-btn>登录</my-btn>
<my-btn>注册</my-btn>
<my-btn>提交</my-btn>
<my-btn>充值</my-btn>

• 可以是dom

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

• 可以是组件

<my-btn>
	<my-icon></my-icon>
	搜索	
</my-btn>

3. 插槽默认值

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

4. 具名插槽
   如果组件的结构比较复杂，可以插入内容的位置比较多，这时，就需要具名插槽了

• 带有名字的插槽

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

• 插值到具体位置

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

• v-slot指令的简写

<template #名字>你要插的内容</template>

四、深层组件传值

• 在祖父级组件上提供数据：

provide:{
		属性:值,
		....
	}

• 在儿孙级注入数据：

inject:[属性...]

五、动态组件

component is=‘组件名称’>

• 如果要缓存组件呢？

<keep-alive>
	<component :is="show"></component>
</keep-alive>