插槽的基本使用（具名插槽）

2022-08-07 19:30:10 阅读：149 来源： 互联网

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>

标签：基本,slot,vue,插槽,具名,DialogWin,写法
来源： https://www.cnblogs.com/ajaXJson/p/16559706.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

插槽的基本使用（具名插槽）