目录
一、插槽
1、编译作用域
官方的解释是:
父组件模板的所有东西都会在父级作用域内编译;
子组件模板的所有东西都会在子级作用域内编译
例如:
Son.vue
<template>
<div>
<h2>子组件</h2>
<p>Vue的插槽</p>
</div>
</template>
<script>
export default {
name: "Son",
data(){
return {
isShow : true
}
}
}
</script>
Father.vue
<template>
<div>
<son v-show="isShow"></son>
</div>
</template>
<script>
import Son from "@/components/Son";
export default {
name: "Father",
data(){
return {
isShow: true
}
},
components: {Son}
}
</script>
最终的结果是:
父组件中的isShow为true,子组件的内容会显示;这是因为:使用的时候,子组件的使用过程是在父组件中出现的,作用域就是父组件,使用的属性也是属于父组件的属性。因此,isShow使用的父组件中的属性,而不是子组件的属性。
2、什么是插槽(slot
)?
子组件作为小模块被多个父组件调用,但每个父组件都要使用该子组件以及在子组件基础上的其他功能,所以使用插槽可以更好的扩充子组件的功能,使其