插槽
- 插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽
- 可以把插槽认为是组件封装期间，为用户预留的内容的占位符
动态组件
- 指的是动态切换组件的显示与隐藏。
接下来由一个案例来讲解一下动态组件
目标效果:
需求: 完成一个注册功能页面, 2个按钮切换, 额外封装两个组件：一个填写注册信息, 一个填写用户简介信息
目标: 多个组件使用同一个挂载点，并可以动态切换，这就是动态组件
目录结构
根组件
├── 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>
App.vue中的代码.
<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变量" - 不能直接拿注册标签名赋值使用
小结
vue内置component组件, 配合is属性, 设置要显示的组件标签名字
