插槽 slot

最新推荐文章于 2024-07-07 03:45:49 发布

阔怕的小怪兽

最新推荐文章于 2024-07-07 03:45:49 发布

阅读量119

点赞数

分类专栏： vue 文章标签：插槽

本文链接：https://blog.csdn.net/weixin_45356907/article/details/100050618

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

slot

slot 插槽

比如：插卡游戏机

分类
- 普通插槽
- 具名插槽
  - 给slot加一个name属性
```
<slot name = "header"></slot>
```
- 注意：以上内容是 Vue 2.5.x的版本
- Vue 2.6.x以上的版本将使用 v-slot指令来代替 2.5.x使用方式
v-slot指令
- 作用：
  - 可以将组件的数据在组件的内容中使用

<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">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

</head>
<body>
  <div id="app">
    <Hello>
      <!-- 电脑要加的内存条 -->
      <p> 这是组件的内容 </p> 
    </Hello>
  </div>

  <template id="hello">
    <div>
      <h3> hello </h3>
      <p> 又是嗨的一天 </p>
      <!-- 电脑中的卡槽 -->
      <slot></slot>
    </div>
  </template>

</body>
<script>
  new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
</script>
</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">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

</head>
<body>
  <div id="app">
    <Hello>
      <!-- 电脑要加的内存条 -->
      <header slot = "header"> 头部 </header>
      <footer slot = "footer"> 底部 </footer>
    </Hello>
  </div>

  <template id="hello">
    <div>
      <slot name = 'header'></slot>
      <h3> hello </h3>
      <p> 又是嗨的一天 </p>
      <!-- 电脑中的卡槽 -->
      <slot name = "footer"></slot>
    </div>
  </template>

</body>
<script>
  new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
</script>
</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">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

</head>
<body>
  <div id="app">
    <Hello>
      <template v-slot:yyb = "slotProps">
        <div>
          {{ slotProps.msg }}
        </div>
      </template>
    </Hello>
      
  </div>

  <template id="hello">
    <div>
      <h3> hello </h3>
      <p> 又是嗨的一天 </p>
      <slot :msg = "msg" name = "yyb"></slot>
    </div>
  </template>

</body>
<script>
  Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: '今天是个好日子'
      }
    }
  })
  new Vue({
    el: '#app',
  })
</script>
</html>