插槽的基本使用(具名插槽)

1.DialogWin.vue文件

给slot标签添加一个name属性名称

<template>
  <div>
    <div>头部</div>
    <div>主体部分
        //匿名插槽
        <slot>
            <h1>这是一个后备内容,当没有内容传入这个插槽的时候,此行才会显示</h1>
        </slot>
        //具名插槽
        <slot name="xujiang">
            <h1>具名插槽后备内容</h1>
        </slot> 
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2.App.vue

tempate标签slot指定要插入数据的插槽名称

这里有两种写法slot="xujiang"/v-slot:xujiang

<template>
  <div id="app">
    <dialog-win>
      //第一种写法
      <template slot="xujiang">
          <h1>我传入了一个具名插槽内容</h1>
      </template>
      //第二种写法
      <template v-slot:xujiang>
          <h1>我传入了一个具名插槽2</h1>
      </template>
    </dialog-win>

  </div>
</template>

<script>
import DialogWin from './components/DialogWin.vue'
export default {
  name: 'App',
  components: {
    DialogWin
  }
}
</script>

<style>
</style>

 

posted @ 2022-08-07 19:25  ajaXJson  阅读(206)  评论(0编辑  收藏  举报