Vue slot 插槽

前端xqf

于 2019-05-28 17:22:35 发布

阅读量126

点赞数

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

本文链接：https://blog.csdn.net/weixin_42635130/article/details/90643447

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

插槽

1.普通插槽

<!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>  头部  </header>
      <section> 内容 </section>
      <footer> 底部 </footer>
    </Hello>
  </div>

  <template id="hello">
    <div>
      hello
      <slot></slot>
    </div>
  </template>
</body>
<script>
  /* 
    slot  插槽
      举例： 

  */

  Vue.component( 'Hello', {
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>
</html>

2.具名插槽

<!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>
      <section slot = "content"> 内容 </section>
      <footer slot = "footer"> 底部 </footer>
    </Hello>
  </div>

  <template id="hello">
    <div>
      <slot name = "header"></slot>
      <slot name = "content"></slot>
      hello
      <slot name = "footer"></slot>
    </div>
  </template>
</body>
<script>
  /* 
    slot  插槽
      作用： 可以让我们在组件中书写内容 
  */

  Vue.component( 'Hello', {
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>
</html>

前端xqf

关注

0
点赞
踩
0

收藏

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

插槽1.普通插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫

专栏目录