zoukankan      html  css  js  c++  java
  • vue slot插槽的使用

    slot插槽的使用场景

    父组件向子组件传递dom时会用到插槽
     
    作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽。展示的状态由父组件来决定
     
    注:想要修改父组件向子组件传递的元素的样式时,只能在对应的子组件进行修改
     
    1.具名插槽的使用
     父组件
    <template slot="header">
          <p>我是头部</p>
    </template>
     
    子组件
    <slot name="header"></slot>
     
    2.作用域插槽的使用1
    父组件
    <template slot-scope="props">
        <li>{{props.content}}</li>
    </template>
     
    子组件
    <ul>
    <slot v-for="item of list" :content=item></slot>
    </ul>
    <script>
      export default {
        data(){
          return {
            list:['zhangsan','lisi','wangwu']
          }
       }
    }
    </script>
     
    3.作用域插槽的使用2
    父组件
    <template slot-scope="props">
       <tr>
         <td>{{props.item.name}}</td>
         <td>{{props.item.age}}</td>
      </tr>
    </template>
     
    子组件
    <table>
      <tr>
       <th>姓名</th>
       <th>年龄</th>
      </tr>
    <slot v-for="item of data" :item=item></slot>
    </table>
     
    <script>
    export default {
      data(){
        return {
           data:[{
             name:'张三',
             age:20
           },{
             name:'李四',
             age:14
          },{
            name:'王五',
            age:10
        }]
      }
     }
    }
    </script>


     
     
     
    2.作用域插槽的使用
  • 相关阅读:
    more命令
    mktemp命令
    有效的括号字符串
    mc命令
    字符串相加
    Vue中虚拟DOM的理解
    chattr命令
    记近一年线上项目经验及架构变更记录
    微博AnalysisQl动态数据视图元数据设计
    搭建prometheus+grafana监控SpringBoot应用入门
  • 原文地址:https://www.cnblogs.com/zousaili/p/9415434.html
Copyright © 2011-2022 走看看