Hao

Vue中使用插槽(二)

JavaScript 2019-03-14 1722 0
18:22:51

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>
  9.     <script>
  10.         Vue.component('child',{
  11.             data() {
  12.                 return {
  13.                     list: ['张三','李四','王五','赵六']
  14.                 }
  15.             },
  16.         template: '<ul><slot v-for="item of list" :item="item">{{item}}</slot></ul>'
  17.         })
  19.         var vm = new Vue({
  20.             el: '#root'
  21.         })
  22.     </script>

 

本文由 Hao创作，转载请注明

最后编辑时间：2019-03-14 16:27:53

发表评论