zoukankan      html  css  js  c++  java
  • vue2 作用域插槽slot-scope详解

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

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

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

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

    1.App.vue

     1 <template>
     2   <div>
     3     <child :propName="items"> <!--传值到子组件-->
     4     <!--写法1 -->
     5       <li
     6         <!--作用域插槽也可以具名 绑定slot name="slotName"-->
     7       slot="slotName"       
     8         <!--把子组件插槽看作一个对象, 赋给scopeName-->
     9       slot-scope="scopeName">
    10         <!-- dos="item.do" (子组件中)-->
    11         {{scopeName.dos}}
    12       </li>
    13     </child>
    14 
    15     <!--写法2 es6 的解构写法 推荐!!!-->
    16     <child :propName="items">
    17       <li slot="slotName" slot-scope="{item}">
    18         {{item.do}}
    19       </li>
    20     </child>

    21 </div> 22 </template> 23 <script> 24 import child from "./components/child.vue" 25 export default{ 26 components:{child}, 27 data(){ 28 return{ 29 items:[ 30 {do:'play'}, 31 {do:'eat'}, 32 {do:'sleep'}, 33 {do:'play'}, 34 {do:'eat'}, 35 {do:'sleep'} 36 ] 37 } 38 } 39 } 40 </script>

    2.child.vue

     1 <template>
     2   <ul>
     3     <slot name="slotName"  <!--作用域插槽也可以具名!-->
     4         v-for="item in items" 
     5         :dos="item.do"  <!--取循环中的项作为属性 方便父组件调用!-->
     6     ></slot>
     7   </ul>
     8 </template>
     9 <script>
    10   export default{
    11     props:['items'] <!--父级items 传过来的值!-->
    12   }
    13 </script>

  • 相关阅读:
    【5】TensorFlow光速入门-图片分类完整代码
    【4】TensorFlow光速入门-保存模型及加载模型并使用
    科研数据库结构
    高并发请求的缓存设计策略
    iOS-KVC的原理
    iOS-KVO的原理
    Kafka too many open files问题解决
    VLOOKUP函数-Excel
    arcgis sql 字符串替换
    ArcGIS矢量转栅格再发布切片服务,还是直接发布切片服务?有何区别?
  • 原文地址:https://www.cnblogs.com/xujian2016/p/10184743.html
Copyright © 2011-2022 走看看