Vue中使用插槽(一)

2019年3月14日09:56:41 发表评论 阅读(1,723)
本文最后更新于2019年3月13日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

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>
  5.     <script>
  6.         Vue.component('child',{
  7.             props: ['content'],
  8.             template: `<div><p>hello</p>
  9.                         <div v-html="this.content"></div>
  10.                         </div>`
  11.         })
  13.         var vm = new Vue({
  14.             el:'#root'
  15.         })
  16.     </script>

使用slot

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

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

默认内容

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

  1. <div id="root">
  2.         <child></child>
  3.     </div>
  5.     <script>
  6.         Vue.component('child',{
  7.             props: ['content'],
  8.             template: `<div><p>hello</p>
  9.                         <slot>我是默认文字</slot>
  10.                         </div>`
  11.         })
  13.         var vm = new Vue({
  14.             el:'#root'
  15.         })
  16.     </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>
  8. <script>
  9.     Vue.component('child',{
  10.         template: `<div>
  11.                         <slot name="header"></slot>
  12.                         <div class="main">main</div>
  13.                         <slot name="footer"></slot>
  14.                         </div>`
  15.     })
  17.     var vm = new Vue({
  18.         el:'#root'
  19.     })
  20. </script>
注意

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

 

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

发表评论

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