vue3.0父子组件通信

vue3更新了很多新的特性，这里就只针对父子组件传参来写一下。

父组件中

<template>
<div class="home">
<div v-for="(item,index) in applyList" :key="index" >
<!--传递参数index，dataObj-->
  <list-item ref="listItemRef" @clickList="clickList" @deleteList="deleteList" :dataObj="item" :index="index"></list-item>
</div>
</template>

import ListItem from '@/views/homePage/components/listItem.vue'//引入子组件
import { onMounted,reactive,toRefs,computed,ref} from 'vue'
export default {
components:{
  ListItem
},
setup(){
//定义数据
  const state:any=reactive({
    applyList:[],
    listItemRef:null//用于获取子组件节点及其相应属性
    time
  })
  //原有的mounted(){}方法，由于vue3的特性要根据需要引入
  onMounted(() => {
  })
   //computed属性也需要引入
   state.time = computed(()=>{
      return ''
   })
   //在页面上的子元素里写ref="listItemRef"
   state.listItemRef = ref(null);
   const clickList=(index:number|string)=>{
   //可以通过state.listItemRef.xxx来访问子组件的属性或调用其方法，类似于原来vue的this.refs.listItemRef.XXX
      state.listItemRef.deleteList()
    }
    //子组件触发的父组件的方法
    const deleteList=(id:string)=>{
    
    }
    return{
      ...toRefs(state),//…toRefs(state)将响应式数据平铺，以便于视图中绑定，要在上面先引入toRefs
      clickList,//将方法return出去
      deleteList
    }
  }
}

子组件中

<template>
      <div @click="clickTime">
      {{dataObj}}
      <div>
      <div @click="deleteList">删除</div>
</template>

export default {
  name:'ListdataObj',
   props: {
    dataObj:Object,
    index:Number,
  },
  setup(props:any,ctx:any){//props:为父组件传递过来的数据，ctx：Vue3公开的选定属性（emit、slots、 attrs）
    console.log(props.dataObj.id,ctx,'子组件')
    const clickTime=()=>{
    //触发父组件中的对应方法，并传参
      ctx.emit('clickList',props.index)
    }
    const deleteList=()=>{
      console.log('deleteList')
      ctx.emit('deleteList',props.dataObj.id)
    }
    return {
      clickTime,
      deleteList
    }

  }
  
}