jsx-vue2 icon indicating copy to clipboard operation
jsx-vue2 copied to clipboard

To give a ref to the JSX Element but I cannot get it by $refs. why?

Open Gourdbaby opened this issue 2 years ago • 0 comments

There is a table, and the function below is to render a Poptip in the table. and whatever I give the div ref or give the Poptip ref. when I am getting it in the context of Table's Vue, I will get undefined.

function createUniquePoptip(){
  let poper = null
  return function (h, holdConent, slotContent) {
    if(poper) return 
    poper = <div ref="aaa">
      <Poptip v-poptip="poptip"  trigger="hover" placement="bottom" transfer={true} width="380">
    { holdConent }
    { slotContent }
  </Poptip>
    </div>
    return poper
  }
}

This is the Table Vue. I get 'poptip' by this.$refs and I always get undefined.

<template>
  <div class="table-wrap">
    <i-table :columns="column" :data="data"></i-table>
  </div>  
</template>

<script>
import Mixins from './table.js'

export default {
  name: "Mtable",
  mixins: [Mixins],
  props: {
    type: {
      type: String,
      default: 'default'
    }
  },
  data(){
    return {
      column: [],
      data: [{candidateName:123,jobName:"ne", action: '覆盖'}]
    }
  },
  created() {
    this.column = this.createColumns()
  },
  mounted() {
    console.log("poptipMouseEnter=====", this.$refs)
  },
}
</script>

The function, createUniquePoptip, is in the Mixins. At the end, Thanks in advance.

Gourdbaby avatar Apr 24 '22 10:04 Gourdbaby