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>

  • 相关阅读:
    循环计时器
    在一个表格里,超过一定宽度字符串进行截取显示点点,鼠标移上去显示全
    判断单选框是否被选中
    美化的select下拉框
    js获取网页高度
    Bootstrap的使用。。。
    解决网站出现GET .woff 404 (Not Found)的问题
    Bootstrap 字体图标(Glyphicons)
    一个设置为display:none;的div,在用.height()方法获取不到它的高,获取到的高度为0.
    substring() slice() substr()的区别联系
  • 原文地址:https://www.cnblogs.com/xujian2016/p/10184743.html
Copyright © 2011-2022 走看看