一、props类型限制??
如果prop是一个对象，不是字符串数组时，它包含验证:
验证类型：String、Number、Boolean、Function、Object、Array
props: {
// 基础类型检测，（‘null’意思是任何类型都可以）,在传参值后加上类型,会自动判断,会限制传的值的参数类型.
propsA: Number,
//多种类型,并列排序
propsB: [String, Number],
// 必传且是字符串
propsC: {
type: String,
required: true,
},
// 数字,有默认值
propsD: {
type: Number,
default: 100
},
},
react:中的是.number.isRequired(必须写的)二、内容分发
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。
简单来说，假如父组件需要在子组件内放一些DOM, 那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活
vue使用特殊的<slot>元素作为原始内容的插槽
例如默认情况下父组件在子组件内套的内容， 是不显示的。
使用单个插槽(slot) 可以将父组件放在子组件的内容。
注：即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，替换了<slot></slot>这个标签。
多个插槽叫做具名slot:
具名slot：被分发的内容的作用域，根据其所在模板决定，受父组件所控制。
index.html:
<!doctype html>
<html>
<head>
<title>VUE练习</title>
<link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
<body>
<div id="e">
<App message="我是父亲的值" v-on:addclick="getnum">
<i slot="titles">我是头部</i>
<b slot="info">我是内容</b>
我是其他的内容
</App>
<App1 v-bind:message1="sum"></App1>
<App2></App2>
<App3></App3>
<App4></App4>
</div>
<script src="./bundle.js"></script>
</body>
</html>
App.vue:
<template>
<div class="app1">
<p>
<!-- 分发 -->
<slot name="titles"></slot>
我是父亲的内容:
<slot name="info"></slot>
<!-- 具名分发 -->
<slot></slot>
</p>
<!-- <input type="button" value="加一" v-on:click="add" /> -->
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
text: "",
num: 0,
};
}, //?????required:?true,
// ?type:?String,
props: {
message: Number,
},
methods: {
add: function () {
this.num++; //儿子自己计算num值
this.$emit("addclick", this.num); //通过emit调用父亲传来的自定义事件，把儿子计算后num作为参数传给父亲
},
},
};
</script>
<style scoped>
.app1 {
width: 100%;
height: 100px;
background: rgb(240, 141, 141);
}
</style>
最终效果图：
三、Keep-alive:
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个?<keep-alive>?元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存！-->
<keep-alive>
??<component v-bind:is="currentTabComponent">
</component>
</keep-alive>缺点：占缓存，浪费缓存。