vue插槽用法

往者不可谏, 来者犹可追

已于 2023-04-17 21:48:40 修改

阅读量153

点赞数 1

分类专栏： VUE 文章标签： vue.js

于 2021-08-09 10:53:32 首次发布

本文链接：https://blog.csdn.net/qdcainiao/article/details/119532702

版权

VUE 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、vue插槽简单用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>插槽</title>
</head>
<body>
  <div id="app">
      <div>父组件</div>
      <com>
        <!-- 插槽<slot>是否显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。 -->
          <div>
              插入子组件的标签
          </div>
      </com>
  </div>
  <script>
      var vm = new Vue({
          el:"#app",
          components: {
              "com" : {
                  template:"<h2>子组件<slot></slot></h2>"
              }
          }
      })
  </script>
</body>
</html>

页面效果：

在这里插入图片描述

二、具名插槽用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>具名插槽</title>
</head>
<body>
  <div id="app">
      <com>
          <template v-slot:header>
              <h1>标题</h1>
          </template>
          <template v-slot:main>
              <h2>内容</h2>
          </template>
          <template v-slot:footer>
              <h3>底部内容</h3>
          </template>
      </com>
  </div>
  <script>
      var vm = new Vue({
          el:"#app",
          data () {
              return {
                  info:1
              }
          },
          components: {
              "com" : {
                  template:`
                  <div class="container">
                      <header>
                          <slot name="header"></slot>
                      </header>
                      <main>
                          <slot name="main"></slot>
                      </main>
                      <footer>
                          <slot name="footer"></slot>
                      </footer>
                  </div>
                  `
              }
          }
      })
  </script>
</body>
</html>

页面效果：

具名插槽

三、作用域插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>作用域插槽</title>
</head>
<body>
  <div id="app">
      <com>
          <template v-slot:default="slotProps">
              {{ slotProps.names }} {{ slotProps.age }}
          </template>
      </com>
  </div>
  <script>
      var vm = new Vue({
          el : "#app",
          data(){
              return {
              }
          },
          components: {
              com : {
                  data(){
                      return {
                          names:"张三",
                          age:40
                      }
                  },
                  template:`<h2>子组件内容<slot :names="names" :age="age"></slot></h2>`
              }
          }
      })
  </script>
</body>
</html>