vue 高级特性slot

slot基本使用

slot 作用域插槽：父组件使用子组件的data数据，主要用于开发组件库，让用户定制样式

slot 具名插槽

<template>
  <div class="header">
    <!-- rights组件 -->
    <p>slot 插槽基本使用</p>
    <!-- <Inp>
      {{list.name}}
    </Inp> -->
    <hr>

    <p>slot作用域插槽：子组件也有data,父组件使用子组件的数据</p>
    <Inp>
      <!-- slotProps可以自定义name,注意slotProps.data需一一对应 -->
      <template v-slot='slotProps'>
          {{slotProps.data.title}}
      </template>
    </Inp>
    <hr>

     <p>具名插槽 注意写法</p>
      <Inp>
      <template v-slot:juming>
          {{list.url}}
      </template>
    </Inp>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: {
        url: 'http://baidu.com'
      }
    }
  },
  components: {
    Inp: () => import('./A')
  }
}
</script>

<template>
  <div>
    <!-- inp组件 -->
    <!-- <p>slot 插槽基本使用</p> -->
    <!-- <slot> 
      会覆盖这里的内容,若无内容则显示默认内容
    </slot>  -->

    <!-- <p>slot作用域插槽，data可以自定义name</p> -->
    <slot :data='info'>
    </slot>

    <!-- <p>具名插槽</p> -->
    <slot name="juming">
    </slot>

  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: 'inp title',
        city: '重庆'
      }
    }
  },
}
</script>

slot作用域插槽使用场景:让用户定制样式

父组件home

<template>
    <div>
        <h1>home组件</h1>
        <p>作用域插槽,主要用于开发组件库,用户定制化展示</p>
        <child1>
            <template slot-scope="data">
                <p>{{data}}</p>
                <p>{{data.item}}</p>
                <div>{{data.item}}</div>
                <li>{{data.item}}</li>
            </template>
        </child1>
    </div>
  
</template>

<script>
import child1 from './Child1'
export default {
    data() {
        return {
            
        }
    },
    components: {
        child1
    },
}
</script>

子组件child1

<template>
    <div>
        <ul>
            <slot v-for="item in nums" :item='item'></slot>
        </ul>
    </div>
  
</template>

<script>
export default {
    data() {
        return {
            nums : [1,2,3,4]
        }
    },
}
</script>