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)
        }
    }
  • 相关阅读:
    【JavaScript】实现队列Queue
    【Leetcode刷题篇】1.两数之和(JS)
    【48个原生JS网页小demo】1.信息切换
    【JavaScript】原生实现call bind apply
    【JavaScript】Interview(精简版)
    【JavaScript】4种常见的内存泄露
    【JavaScript】原型和原型链
    论自作音乐播放器涉及知识点总结
    Android横竖屏切换继续播放视频
    Android上传头像代码,相机,相册,裁剪
  • 原文地址:https://www.cnblogs.com/daifuchao/p/15003325.html
Copyright © 2011-2022 走看看