Vue组件的插槽

小猫虎儿~

已于 2022-08-13 22:23:42 修改

阅读量545

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-13 12:18:47 首次发布

本文链接：https://blog.csdn.net/weixin_61562639/article/details/126294846

版权

(1)匿名插槽(默认插槽)：，有且只有一个

(2)具名插槽

(3)作用域插槽

5、v-slot指令

一、插槽

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使用的父组件中的属性，而不是子组件的属性。