slot的基础知识

最新推荐文章于 2024-01-03 10:00:00 发布

panda_pan9527

最新推荐文章于 2024-01-03 10:00:00 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/panda_pan9527/article/details/97970983

版权

slot

slot :俗称插槽
1. 类比：游戏卡的游戏机
2. 作用：开辟一个空间，给未来的元素使用
3. 名词解释：
未来元素：组件的内容

<!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> slot </title>
</head>
<body>
  <div id="app">
    <Hello>
      <p> 这里是Hello的内容 </p>
    </Hello>
  </div>

  <template id="hello">
    <div>
      <h3> 这里是hello组件 </h3>
      <slot></slot>
    </div>
  </template>

</body>
<script src="../vue.js"></script>
<script>
  Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
   
  }).$mount('#app') // 手动挂载
</script>
</html>

slot-具名插槽

<!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> slot </title>
</head>
<body>
  <div id="app">
    <Hello>
      <header slot = "header">
        头部
      </header>
      <footer>
        底部
      </footer>
    </Hello>
  </div>

  <template id="hello">
    <div>
      <slot name = "header"></slot>
      <h3> 这里是hello组件 </h3>
      <slot></slot>
    </div>
  </template>

</body>
<script src="../vue.js"></script>
<script>
  Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
   
  }).$mount('#app') // 手动挂载
</script>
</html>

v-slot

v-slot的目的是将slot组件身上的数据传递给绑定的未来元素

<!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>
</head>
<body>
  <div id="app">
    <Hello>
      <template v-slot:default = "data">
        <p> {{ data.msg }} </p>
      </template>
    </Hello>
  </div>

  <template id="hello">
    <div>
      <h3> 这里是hello组件 </h3>
      <slot :msg = "msg"></slot>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 1905'
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>
</html>