Vue中使用插槽(二)

2019年3月14日18:22:51 发表评论 47 阅读

Vue中使用插槽(二)

 

上篇文章写到了基础插槽,默认文字以及具名插槽,本文来说一下作用域插槽,有时让插槽内容能够访问子组件中才有的数据是很有用的。

作用域插槽

设想一个带有如下模板的child组件:

  1. template: '<ul><slot v-for="item of list" :item="item">默认内容</slot></ul>'

父组件的内容是这样的:

  1. <child>
  2.             {{item}}
  3. </child>

然后我们会发现上述代码不会正常工作,因为只有子组件模板内可以访问到item而我们提供的内容是在父级渲染的。因此{{item}}在这里是无效的,是没有数据的。

为了让item在父级的插槽内容可用,我们可以将item作为一个 <slot>元素的特性绑定上去:

  1. <slot v-for="item of list" :item="item">{{item}}</slot>

绑定在<slot>元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以给v-slot带一个值来定义我们提供的插槽 prop 的名字:

  1. <child>
  2.           <template v-slot:default="user">
  3.               <li>{{user.item}}</li>
  4.           </template>
  5. </child>

这样就可以成功渲染出数据,在这个例子中,我给插槽 prop 的对象命名为user,但你也可以使用任意你喜欢的名字。

注意

v-slot只能添加在一个<template> (有一种例外情况),这一点和已经废弃的 slot特性不同。

完整代码

  1. <div id="root">
  2.         <child>
  3.             <template v-slot:default="user">
  4.                 <li>{{user.item}}</li>
  5.             </template>
  6.         </child>
  7.     </div>
  8.     <script>
  9.         Vue.component('child',{
  10.             data() {
  11.                 return {
  12.                     list: ['张三','李四','王五','赵六']
  13.                 }
  14.             },
  15.         template: '<ul><slot v-for="item of list" :item="item">{{item}}</slot></ul>'
  16.         })
  17.         var vm = new Vue({
  18.             el: '#root'
  19.         })
  20.     </script>

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

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