Vue插槽

最新推荐文章于 2024-05-28 17:25:55 发布

小楼昨夜那事

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量108

点赞数 1

分类专栏： Vue框架文章标签： vue

本文链接：https://blog.csdn.net/T_ambition/article/details/108992747

版权

Vue框架专栏收录该内容

15 篇文章 0 订阅

订阅专栏

插槽

利用<slot>标签可以实现组件在不同的父组件中使用有不同的 html 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>
<body>
  <div id="app">
    <home></home>
  </div>
  <template id="tql">
    <child>
      <i>你好</i>
    </child>
  </template>
</body>
<script>
  const Child = {
    template: `
      <div>
        <slot /> 
        <h1>我是child主体内容</h1>
        以下地方在 不同组件中使用 内容不一样
        <hr width="300"> 
        <!--
          slot 是一个占位符
          最终 会被 组件自定义标签内容所填充，内容是什么 slot就是什么
        -->
      </div>
    `
  }
  const Home = {
    template: "#tql",
    components: {
      Child
    }
  }
  Vue.component("home",Home);
  const vm = new Vue({
    el: "#app",
    data: {

    }
  })
</script>
</html>

具名插槽（插槽起了名字有多个插槽）

允许我们定义多个插槽，每个插槽起一个名字，在嵌套内容可以根据名字一一对应，从而实现在组件中不同的位置实现自定义的Html样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>
<body>
  <div id="app">
    <home></home>
  </div>
  <template id="tql">
    <child>
      <i slot="s1">你好</i>
      <b slot="s2">Vue.js</b>
    </child>
  </template>
</body>
<script>
  const Child = {
    template: `
      <div>
        <slot name="s1"/> 
        <h1>我是child主体内容</h1>
        以下地方在 不同组件中使用 内容不一样
        <hr width="300"> 
        <slot name="s2"/>
        <!--
          slot 是一个占位符
          最终 会被 组件自定义标签内容所填充，内容是什么 slot就是什么
        -->
      </div>
    `
  }
  const Home = {
    template: "#tql",
    components: {
      Child
    }
  }
  Vue.component("home",Home);
  const vm = new Vue({
    el: "#app",
    data: {

    }
  })
</script>
</html>

小楼昨夜那事

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue插槽

插槽利用<slot>标签可以实现组件在不同的父组件中使用有不同的html结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...
复制链接

扫一扫