Vue中插槽的使用

Vue中插槽

1、默认插槽

<template>
  <div>
    <h1>我是插槽的第一种方式，默认插槽</h1>
    <slot>如果未输入，我就是默认的值</slot>
  </div>
</template>

<script>
export default {
 name: "SlotUse"
}
</script>

2 、具名插槽

<!--组件定义-->
<template>
  <div>
    <h1>我是插槽的第二种方式，具名插槽</h1>
    <slot name='test'>如果未输入，我就是默认的值</slot>
  </div>
</template>

<script>
export default {
 name: "SlotUse"
}
</script>

<template>
  <div>
    <h1>总的app组件</h1>
    <SlotUse>
      <div slot='test'>我使用了具名插槽</div>
    </SlotUse>
  </div>
</template>

<script>
import SlotUse from "@/components/SlotUse";
export default {
  name: "App",
  components: {SlotUse},
  data(){
    return {
      list:["张三","李四","王五"]
    }
  },
  methods: {
    test(value) {
      console.log(value)
    }
  }
}
</script>

3 、作用域插槽

当我的父组件给子组件插入东西时，想使用子组件的值时，就得使用作用域插槽

<!--这是父组件-->
<template>
  <div>
    <h1>总的app组件</h1>
    <SlotUse :soltList="list" >
      <template slot-scope="socpe">
        <ul>
          <li v-for="(p,index) in socpe.mylist">
            {{p}}
          </li>
        </ul>
      </template>
    </SlotUse>
  </div>
</template>

<script>
import SlotUse from "@/components/SlotUse";
export default {
  name: "App",
  components: {SlotUse},
  data(){
    return {
      list:["张三","李四","王五"]
    }
  }
}
</script>

<!--这是子组件-->
<template>
  <div>
    <h1>我是插槽的第三种方式，作用域插槽</h1>
    <slot :mylist="soltList">如果未输入，我就是默认的值</slot>
  </div>
</template>

<script>
export default {
 name: "SlotUse",
 props:['soltList']
}
</script>