zoukankan      html  css  js  c++  java
  • 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)
        }
    }
  • 相关阅读:
    使用C语言来扩展PHP,写PHP扩展dll
    用C语言写PHP扩展 linux
    mysql 建索引删除索引命令
    xhprof安装&&使用
    Burst Windows 2003 VPS安装中文语言包图文教程
    yii框架的缓存
    rsync的配置与应用
    mysql分组排序取前N条记录的最简洁的单条sql !
    linux下php以fastcgi模式运行
    JS收集<2>:图片上传_限制格式、类型、尺寸
  • 原文地址:https://www.cnblogs.com/daifuchao/p/15003325.html
Copyright © 2011-2022 走看看