Vue中使用插槽(一)

2019年3月14日09:56:41 发表评论 阅读(1,792)

Vue中使用插槽(一)

Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将slot元素作为承载分发内容的出口。那么具体要怎么用呢?

不使用slot

  1. <div id="root">
  2.         <child content="<p>world</p><p>world</p><p>world</p>"></child>
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             props: ['content'],
  7.             template: `<div><p>hello</p>
  8.                         <div v-html="this.content"></div>
  9.                         </div>`
  10.         })
  11.         var vm = new Vue({
  12.             el:'#root'
  13.         })
  14.     </script>

使用slot

  1. <div id="root">
  2.         <child>
  3.             <p>world</p><p>world</p><p>world</p>
  4.         </child>
  5.     </div>
  6.     <script>
  7.         Vue.component('child',{
  8.             props: ['content'],
  9.             template: `<div><p>hello</p>
  10.                         <slot></slot>
  11.                         </div>`
  12.         })
  13.         var vm = new Vue({
  14.             el:'#root'
  15.         })
  16.     </script>

当组件渲染的时候,<slot></slot> 将会被替换为“world world world”。插槽内可以包含任何模板代码,包括 HTML,甚至其他的组件。使用slot后感觉逻辑清晰,很方便。

默认内容

有时为一个插槽设置具体的默认内容是很有用的,它只会在没有提供内容的时候被渲染。例如在一个child组件中:

  1. <div id="root">
  2.         <child></child>
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             props: ['content'],
  7.             template: `<div><p>hello</p>
  8.                         <slot>我是默认文字</slot>
  9.                         </div>`
  10.         })
  11.         var vm = new Vue({
  12.             el:'#root'
  13.         })
  14.     </script>

如上代码中,当child组件不提供任何插槽内容时,内容“我是默认文字”将被渲染在页面上。

具名插槽

有时我们需要多个插槽。比如一个组件中显示页头,内容和页脚,对于这样的情况,slot元素有一个特殊的特性:name,这个特性可以用来定义额外的插槽:

  1. <div id="root">
  2.     <child>
  3.         <div class="header" slot="header">header</div>
  4.         <div class="footer" slot="footer">footer</div>
  5.     </child>
  6. </div>
  7. <script>
  8.     Vue.component('child',{
  9.         template: `<div>
  10.                         <slot name="header"></slot>
  11.                         <div class="main">main</div>
  12.                         <slot name="footer"></slot>
  13.                         </div>`
  14.     })
  15.     var vm = new Vue({
  16.         el:'#root'
  17.     })
  18. </script>
注意

在 2.6.0 版本中,vue官方为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot指令)。它取代了 slotslot-scope这两个目前已被废弃但未被移除且仍在文档中的特性。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛