0
点赞
收藏
分享

微信扫一扫

Vue3 - 插槽 Slots

西特张 03-11 19:45 阅读 2

插槽 Slots

  1. 插槽内容:<slot>
  2. 编译作用域
  3. 后备内容
  4. 具名插槽
  5. 作用域插槽

Vue3 - 插槽 Slots_插槽

  • 插槽不仅仅可以传递数据,还可以传递视图。
  • 插槽多用来封装一些组件,比如:type的切换组件。常用的组件都是用插槽来实现的。

vue实现一套内容分发的API,插槽通过<slot>元素作为承载分发内容的出口。

  • 1.插槽组件不是以单标签形式结束,而是以双标签形式结束。
  • 2.组件内的内容,就是插槽。如果什么都不操作,对应的组件的内容默认不显示。

插槽内容

  1. 插槽内容:<slot>
  • App.vue

<script>
  //1.导入对应的vue文件
  import MyComponent from './components/MyComponent.vue';
  export default{
    name: "App",
    components:{
      //2.注入对应组件
      MyComponent
    }
  }
</script>
<template>
  <div id="app">
    <!-- 3.插槽组件 不是单标签-->
    <MyComponent>
    </MyComponent>
  </div>
</template>
<style >
</style>

  • MyComponent.vue

<template>
  <div>
    <h3>插槽</h3>
    <div>
      <!-- 4.插入父vue文件的MyComponent内的内容 -->
        <slot>插槽内容</slot>
    </div>
  </div>
</template>
<script>
export default {

}
</script>
<style>
</style>

Vue3 - 插槽 Slots_作用域_02

App.vue 里面的插槽组件显示的内容在 MyComponent.vue 文件内

编译作用域

  1. 编译作用域

对应页面内容不是固定的,而是通过js业务去获取的。

<script>
  //1.导入对应的vue文件
  import MyComponent from './components/MyComponent.vue';
  export default{
    name: "App",
    components:{
      //2.注入对应组件
      MyComponent
    },
    data(){
      return{
        msg: "我是插槽内容!!"
      }
    }
  }
</script>

<template>
  <div id="app">
    <!-- 3.插槽组件 不是单标签 -->
    <MyComponent>
      <!-- 5.文本内容通过js业务去获取 -->
      <div>{{msg}}</div>
    </MyComponent>
  </div>
</template>

<style >
</style>

Vue3 - 插槽 Slots_作用域_03

  • 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

后备内容

为插槽设置具体的后备「默认」内容很有用,它只会在没有提供内容的时候被渲染

  1. 后备内容

如果App.vue内对应插槽什么值都没有传递,则在 MyComponent.vue 文件中进行定义。

  • App.vue

<script>
  //1.导入对应的vue文件
  import MyComponent from './components/MyComponent.vue';
  export default{
    name: "App",
    components:{
      //2.注入对应组件
      MyComponent
    },
    data(){
      return{
        msg: "我是插槽内容!!"
      }
    }
  }
</script>

<template>
  <div id="app">
    <!-- 3.插槽组件 不是单标签 -->
    <MyComponent>
      <!-- 5.文本内容通过js业务去获取 -->
    </MyComponent>
  </div>
</template>
<style >
</style>

  • MyComponent.vue

<template>
  <div>
    <h3>插槽</h3>
    <div>
      <!-- 4.插入父vue文件的MyComponent内的内容 -->
        <slot>默认值/缺省值</slot>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

Vue3 - 插槽 Slots_插槽_04

具名插槽

  1. 具名插槽

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

v-slot 指令只能在<template> 元素上使用

  • App.vue

<script>
  //1.导入对应的vue文件
  import MyComponent from './components/MyComponent.vue';
  export default{
    name: "App",
    components:{
      //2.注入对应组件
      MyComponent
    },
    data(){
      return{
        msg: "我是插槽内容!!"
      }
    }
  }
</script>
<template>
  <div id="app">
    <!-- 3.插槽组件 不是单标签 -->
    <MyComponent>
      <!-- 5.文本内容通过js业务去获取 -->
      <template v-slot:header>
        <div>{{msg}}</div>
      </template>
      <template v-slot:body>
        <div>我是内容</div>
      </template>
      <template v-slot:footer>
        <div>我是底部</div>
      </template>
    </MyComponent>
  </div>
</template>
<style >
</style>

Vue3 - 插槽 Slots_插槽_05

可以通过名字去安排视图所在的位置。

Vue3 - 插槽 Slots_插槽_06

举报

相关推荐

0 条评论