Vue组件和props - web前端 | MrNobody = MrNobody's Blog = 保持呼吸不要断气

# 组件

组件之间可以相互引用，首先得注册后使用

# 如何注册

注册组件的方式分为两种，全局注册和局部注册

被全局注册的组件，可以在全局任何一个组件内使用 /
被局部注册的组件，只能在当前注册的范围内使用

# 全局注册组件

在 main.js 中导入需要被全局注册的组件

import Count from "@/components/Count.vue";

调用 Vue.component () 方法全局注册组件

Vue.component('Count', Count)

在 app 组件中使用 Count 组件

<Count></Count>

# 局部注册组件

在 app.vue 中导入需要被局部注册的组件

import Count from "@/components/Count.vue";

在 components 节点下通过键值对的方式注册组件

	components: {
	'Count': Count,
	}

在 app 组件中使用 Count 组件

<Count></Count>

# 全局注册和局部注册的区别

被全局注册的组件，可以在全局任何一个组件内使用
被局部注册的组件，只能在当前注册的方位内使用

# 组件的 props

props 是组件的自定义属性，组件的使用者可以通过 props把数据传递到子组件内部，供子组件内部进行使用。

作用：父组件通过 props向子组件传递要展示的数据
好处：提高了组件的复用性

# 如何声明 props

在封装 Vue 组件时，可以把动态的数据项作为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。

在子组件中声明两个要使用的 props 数据比如向外界传递一个标题，作者可以声明一个 props 数组

外界可以传递指定的数据，到当前的组件中

props:['title','author']

然后可以在 DOM 结构中使用title的值和author 的值，使用插值表达式 {{}} 将两个值渲染到里面

	<div>
	Article组件
	<h3>标题：{ title }</h3>
	<h3>作者:{ author }</h3>
	抽刀断水水更流，举杯消愁愁更愁
	</div>

接着在使用这个组件期间，可以传递两个数据的值

<Article title="鹅鹅鹅" author="木子日天"></Article>

也可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值

<Article :title="info.title" :author="info.name"></Article>

# props 验证

指的是：在封装组件时对外界传递过来的 props 数据进行合法性的效验，从而防止数据不合法的问题。

使用数组类型props 节点的话，无法为每个 props指定具体的数据类型

# 对象类型的 props 节点

使用对象类型的 props 节点，可以对每个 props 进行数据类型的效验

对象类型的 props 节点，提供了多种数据验证方案

基础的类型检查

	props:{
	//title 的属性值只能是数字类型
	title:Number,
	}

多个可能的类型

	props:{
	//title 的属性值可以是 "字符串" 或者 "数字"
	title:[String,Number],
	}

必填项效验

	props:{
	title:{
	type:String, // 表示当前属性的值必须是 String 字符串类型
	required:true // 表示当前属性是
	}
	}

属性默认值

	props:{
	age:{
	type:Number, // 表示当前属性的值必须是 String 字符串类型
	default:18, // 如果有使用者没有指定 age 的值则它的默认值为 18
	}
	}

自定义验证函数

# 动态组件

指的是动态的切换组件的显示与隐藏。vue 提供了一个内置的 <component> 组件，专门用来实现组件的动态渲染。

<component> 是组件的占位符
通过 is 属性动态指定要渲染的组件名称
<component is="要渲染的组件的名称"></component>

# 使用 keep-alive 保持这状态

默认情况下，切换动态组件时无法保持组件的状态。这样就可以使用 <keep-alive> 组件保持动态组件的状态

使用方式非常简单

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

前端 Vue