Vue3.0插槽

用法：

父组件App.vue

<template>
  <div>
    
    <AChild>
      
      
      <div id="mydiv">我是在App.vue组件中的一段HTML1div> 
    AChild>
    
    
    <AChild>
      <template v-slot="aaa">  
        <div>我是在App.vue组件中的一段HTML1div>
      template>
    AChild>
 
    
    
    <AChild>
      <template v-slot:bbb="myprops">  
        <button @click="handelClick(myprops)">点我button>
        <ul>
          <li v-for="item in myprops.mylist" :key="item">{{item}}----这是由父组件重新渲染并覆盖了子组件中名字为bbb插槽中的内容li>
        ul>
        <div>{{myprops.mydata}}div>
      template>
    AChild>
  div>
template>
<script>
import AChild from "./components/AChild.vue" //导入AChild组件模板
export default {
  components: {
    AChild
  },
  methods:{
    handelClick(myprops){
      console.log(myprops)
      console.log(myprops.mylist) //输出：["中国", "美国", "俄罗斯"]
      console.log(myprops.mydata) //输出："123"
    }
  }
}
 
script>

子组件AChild.vue

<template>
    <div>
        <span>我的子组件内容1span>
        
        <slot>slot>
 
        
        <slot name="aaa">slot>
 
        
 
        
        <slot name="bbb" :mylist="datalist" mydata="123"> 
            <ul>
                <li v-for="item in datalist" :key="item">{{ item }}li>
            ul>
        slot>
    div>
template>
<script>
export default {
    data() {
        return {
            datalist: ["中国", "美国", "俄罗斯"]
        }
    }
}
script>