vue3父子传值和插槽

父组件：

<template>
  <div>父组件
    <Child :msg="info" @fatherEvent="fatherCon">
       <!-- 默认插槽 -->
      <!-- <span>父组件数据插在子组件</span> -->

      <!-- 具名插槽 -->
      <template #abc>具名插槽数据</template>

    </Child>
  </div>
</template>

<script>
import {reactive,ref } from 'vue'
import Child from './child.vue'
export default {
  name: 'father',
  components:{
    Child
  },
  setup(){
    let info = reactive({
      name:'哈哈',
      age:'18',
      hobby:['打球', '洗完', '洗衣服']
    })

    function fatherCon(value){
      console.log(value,'我是父组件');
    }
    // let info = ref('父数据')

    return {info, fatherCon}
  }
  

}
</script>

子组件：

<template>
  <div>我是子组件

   <p>{{listData.name}}</p>
   <p>{{listData.age}}</p>
   <ol>
     <li v-for="(item,index) in listData.hobby" :key="index">{{item}}</li>
   </ol>

   <button @click="handlerFather">点击触发父组件</button>

   <!-- 默认插槽 -->
   <!-- <slot></slot> -->

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



  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'child',
  props:['msg'],
  setup(props, context){

    let listData = reactive({
      name: props.msg.name,
      age: props.msg.age,
      hobby:props.msg.hobby
    })


    function handlerFather(){
      context.emit('fatherEvent', '父组件你好，我是子组件')
    }

    return {listData, handlerFather}
    
  },
 
}
</script>

具名插槽

在vue3中具名插槽身上直接写slot="xxx"不生效，将slot改为v-slot:插槽名即可

<template slot='abc'>xxx</template>

<template v-slot:abc>xxx</template>

在使用具名插槽，给template标签上设置v-slot数据不显示，改成#缩写形式就生效。可能是某些地方写错了，明天继续看下