vue2 作用域插槽slot-scope详解

插槽分为单个插槽，具名插槽，还有作用域插槽，前两种比较简单这里就不赘述了，今天的重点是讨论作用域插槽。

简单来说，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；

作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。

注意:在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。

1.App.vue

 <template>

   <div>

     <child :propName="items"> <!--传值到子组件-->

     <!--写法1 -->

       <li

         <!--作用域插槽也可以具名 绑定slot name="slotName"-->

       slot="slotName"

         <!--把子组件插槽看作一个对象, 赋给scopeName-->

       slot-scope="scopeName">

         <!-- dos="item.do" (子组件中)-->

         {{scopeName.dos}}

       </li>

     </child>

     <!--写法2 es6 的解构写法 推荐!!!-->

     <child :propName="items">

       <li slot="slotName" slot-scope="{item}">

         {{item.do}}

       </li>

     </child>

   </div>

 </template>

 <script>

   import child from "./components/child.vue"

   export default{

     components:{child},

     data(){

       return{

         items:[

           {do:'play'},

           {do:'eat'},

           {do:'sleep'},

           {do:'play'},

           {do:'eat'},

           {do:'sleep'}

         ]

       }

     }

   }

 </script>

2.child.vue

 <template>

   <ul>

     <slot name="slotName"  <!--作用域插槽也可以具名!-->

         v-for="item in items"

         :dos="item.do"  <!--取循环中的项作为属性 方便父组件调用!-->

     ></slot>

   </ul>

 </template>

 <script>

   export default{

     props:['items'] <!--父级items 传过来的值!-->

   }

 </script>

巴特西

vue2 作用域插槽slot-scope详解

最新文章

热门文章