深入理解VUE组件
组件参数校验（props:{}）
**props:**可以规范的参数类型为
单个参数：直接写参数类型
复数参数：数组形式 [ ] ，将每个类型添加进去
对象型参数：
第一个值为，参数类型（ type: String）
type包括
String
Number
Boolean
Array
Object
Date
Function
Symbol
第二个值为，参数是否必须（required: true），true为必须，false为非必须，即如果没有传递 propC 参数，就会报错
第三个值为，默认值（default: 100），即如果没有传递参数过来，会自动调用默认的值
validator
可以自定义校验器，对参数进行检查校验
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
}
}
给组件绑定原生事件（.native修饰符）
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。
这时，你可以使用 v-on 的 .native 修饰符：
<div id="root">
<child-components @click="foo"></child-components>
//在父组件上绑定的事件，是无法被触发的
//非父子组件之间传值
插槽（slot）
插槽的使用为，父组件 —> 子组件（slot），
即 父组件 向 子组件 传递内容，子组件用 slot 插槽进行接收
<div id="root">
<child-com>
<p>hello</p>
</child-com>
</div>
var childCom = {
template:
`
world
`,
}
具名插槽（slot name=" "）可以将父组件内容传递到指定插槽内部
<child-com>
<p slot="hello">hello</p>
<p slot="world">world</p>
</child-com>
var childCom = {
template:
`
bey
作用域插槽
让（父组件）插槽 内容 能够访问 子组件中才有的 数据 是很有用的
动态组件与v-once指令
动态组件语法（必须要 omponent 标签包裹）
currentTabComponent 参数 的意思是，需要切换的组件名
<component v-bind:is="currentTabComponent"></component>
可以点击 change 按钮 来回切换 childconone 组件 与 childcontwo 组件
<div id="root">
<component :is="type"></component>
<!-- <childconone v-if="type === 'one'"></childconone>
<childcontwo v-if="type === 'two'"></childcontwo> -->
<button @click="btnClick">change</button>
</div>
var childconone = {
template:"child-one",
data() {
return {
}
},
}
var childcontwo = {
template:"child-two",
data() {
return {
}
},
}
methods: {
btnClick:function(){
this.type = this.type === "childconone" ? "childcontwo" : "childconone";
}
},
动态组件小demo，顺便一提 keep-alive 的使用 keep-alive 会保持这些组件的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.bord{
border: 1px solid black;
}
.one{
height: 65px;
width: 300px;
text-align: left;
}
.two{
height: 20px;
width: 300px;
text-align: left;
}
.ulbtn{
float: left;
display: inline-block;
border-right: 1px solid grey;
}
</style>
</head>
<body>
<div id="root">
<button @click="pageo">page1</button><button @click="paget">page2</button>
<keep-alive>
<component :is="type"></component>
</keep-alive>
</div>
<script>
var one = {
template:`
- 1-1
- 1-2
- 1-3
默认页
第一页
第二页
第三页
`,
data() {
return {
type:"on"
}
},
methods:{
lione:function(){
this.type = "one"
},
litwo:function(){
this.type = "two"
},
lithree:function(){
this.type = "three"
},
}
}
var two = {
template:`page2`,
}
Vue.component("one-one",{
template:"",
data() {
return {
}
},
})
var vm = new Vue({
el:"#root",
data() {
return {
type:"one",
}
},
components:{
one,
two
},
methods: {
pageo:function(){
this.type = "one"
},
paget:function(){
this.type = "two"
}
},
})
</script>
</body>
</html>
v-once指令
写在根，id= “root”，的最外层的 div 上
意思是，就算组件中的内容有所改变，我也不会改变，只会在加载的时候渲染一次
即，外层 div上有 v-once ，其内部内容有所改变，也不会重新渲染内部