Vue.js——slot-具名插槽的使用——2020.12.8

最新推荐文章于 2022-06-28 14:06:48 发布

Blockchain_KT

最新推荐文章于 2022-06-28 14:06:48 发布

阅读量266

点赞数 3

分类专栏： Vue.js-实战开发文章标签： vue python js javascript nodejs

本文链接：https://blog.csdn.net/weixin_43402353/article/details/110870820

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

本文展示了如何在VueJS中使用具名插槽的代码实例，通过创建一个名为`cpn`的组件，定义了`left`, `center`, `right`三个具名插槽，并在父组件中插入内容替换插槽的默认值。运行结果显示，插槽内容成功被替换，实现了自定义布局的效果。

摘要由CSDN通过智能技术生成

slot-具名插槽的使用

案例代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/12/8 12:13-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn>

  </cpn>
  <hr>
  <cpn>
<!--    取名name 调用slot-->
    <span slot="center">标题</span>
    <span slot="left">返回</span>
    <span slot="right">更多</span>
  </cpn>
</div>

<template id="cpn">
  <div>
<!--    slot中间均是默认值-->
  <slot name="left"><span>左边</span></slot>
  <slot name="center"><span>中间</span></slot>
  <slot name="right"><span>右边</span></slot>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{

    },
    components:{
      cpn:{
        template:'#cpn'
      }
    }
  })
</script>

</body>
</html>

二丶运行结果

在这里插入图片描述

——钟鼓馔玉不足贵，但愿长醉不愿醒——

Blockchain_KT

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue.js——slot-具名插槽的使用——2020.12.8

slot-具名插槽的使用案例代码二丶运行结果——钟鼓馔玉不足贵，但愿长醉不愿醒——案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g
复制链接

扫一扫