vue3 组件传值

时间:2021-07-12
本文章向大家介绍vue3 组件传值,主要包括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)
    }
}

原文地址:https://www.cnblogs.com/daifuchao/p/15003325.html