vue3 組件傳值

父組件：

<BuildingAttrTable

      v-if="type == 0"

      :id="id"

      ref="BuildingAttrTable"

      :type="type"

      :propdata="allData"

      @myclickBui="onmyclickBui"

      @myclickBui2="onmyclickBui2"

    ></BuildingAttrTable>

import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'

import BuildingAttrTable from '../../components/BuildingAttrTable.vue'

 

interface IState {

  type: number　

   id: string 

   allData: object

 

}

 setup() {　　

const state = reactive<IState>({

      type: 0 ,

      id: '', 

      allData: {},

})

 

    const route = useRoute()

    const { type, id } = route.query

　　

 　const onmyclickBui = () => {

　　     console.log("***************")

    }

    const onmyclickBui2 = val => {

           console.log("***************")

    }

　

 　// vue2 this.$refs.BuildingAttrTable   vue3 　BuildingAttrTable .value

　const BuildingAttrTable = ref(null)

 

onMounted(() => {

 

    })

    onBeforeRouteUpdate(to => {

      const { type, id } = to.query

       

    })

return {

      ...toRefs(state),

      BuildingAttrTable,  

    }

　 

}

 

子組件：

 

import {

  defineComponent,

  reactive,

  toRefs,

  onMounted,

  defineEmit,

  useContext,

} from 'vue'

 

props: ['propdata', 'id', 'type'],

setup(props, context){

console.log(props.propdata)

console.log(props.propdata)

 const emit = defineEmit(['myclickBui', 'myclickBui2'])

    const ctx = useContext()

    const emitclick = () => {

      ctx.emit('myclickBui')

    }

    const emitclick2 = val => {

      ctx.emit('myclickBui2', val)

    }

}