props校验
普通格式： props: ["propA", "propB"]。没有类型检查
高阶格式：
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}## 组件进阶 - 动态组件
目标效果
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
组件进阶 - 动态组件
目标效果
需求: 完成一个注册功能页面, 2个按钮切换, 额外封装两个组件：一个填写注册信息, 一个填写用户简介信息
目标: 多个组件使用同一个挂载点，并可以动态切换，这就是动态组件
目录结构
动态组件
Bash复制代码
根组件
├── App.vue
└── components
├── UserName.vue # 用户名和密码输入框
└── UserInfo.vue # 人生格言和自我介绍框
格式
<component :is="comName"></component>
操作
UserName.vue
<template>
<div>
<h2>UserName</h2>
<p>用户名:<input /> </p>
<p>密码:<textarea /> </p>
</div>
</template>
<script>
export default {
}
</script>
父组件
<template>
<div>
<button @click="comName = 'UserName'">账号密码填写</button>
<button @click="comName = 'UserInfo'">个人信息填写</button>
<p>下面显示注册组件:</p>
<div style="border: 1px solid red">
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</div>
</div>
</template>
<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
data() {
return {
comName: "UserName",
};
},
components: {
UserName,
UserInfo,
},
};
</script>
注意
- is只能是动态属性=》
:is="组件注册后的标签名字符串或data变量" - 不能直接拿注册标签名赋值使用
默认插槽
当一个组件内有2处以上需要外部传入标签的地方
格式
定义：
使用：
- <template #xxx></template>;
- <template v-slot:xxx></template>
组件进阶-作用域插槽
- 创建子组件, 准备slot, 在slot上绑定属性和子组件值
- 使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"
- 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置
