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.作用域插槽的使用
  • 相关阅读:
    列表页无限滚动翻页组件--解决性能问题
    UI组件化介绍
    js请求数据的例子
    移动端bug和优化
    利用字符串路径获取对象集合的值
    n个骰子的和,组成数字m的可能
    算法-回形路径
    学习python-跨平台获取键盘事件
    获取数组中多个相加等于0的一组数字 javascript
    一个矩阵 JavaScript
  • 原文地址:https://www.cnblogs.com/zousaili/p/9415434.html
Copyright © 2011-2022 走看看