Javascript 如何在mixin VUE中传递选择器

我想用它做一个混合，我想计算一个元素的偏移宽度。 这是我的混音：

export const boxWidth = (selector) => ({
  mounted() {
    selector.addEventListener(
      'resize',
    this.setBoxWidth
  );
},
methods: {
  setBoxWidth(e) {
   let box = e.target;
   this.myBoxWidth =  box.offsetWidth;
   console.log(this.myBoxWidth);
  }
}
})

并试图在组件中调用它

<template>
  <div
    ref="visuraBox"
    class="container"
  >
    <div class="field">
      <label class="label">Name</label>
      <div class="control">
        <input
          class="input"
          type="text"
          placeholder="e.g Alex Smith"
        >
      </div>
    </div>
    <div class="field ">
      <label class="label">Name</label>
      <div class="control">
        <input
          class="input"
          type="text"
          placeholder="e.g Alex Smith"
        >
      </div>
    </div>
  </div>
</template>

<script>
import { boxWidth } from '../mixins/boxWidth'

export default {
  name: 'VisuraCatForm',
  mixins: [boxWidth(this.$refs.visuraBox)],
  data() {
    return {
      myBoxWidth: 0
    }
  },
  created() {
    const myBox = this.$refs.visuraBox
    this.myBoxWidth = myBox.offsetWidth;
  }
}
</script>

<style lang='scss' scoped>
@import '@/assets/design/components/_form.scss';
</style> 

名称
名称
从“../mixins/boxWidth”导入{boxWidth}
导出默认值{
名称：“VisuraCatForm”，
mixins:[boxWidth（此$refs.visuraBox）]，
数据（）{
返回{
myBoxWidth:0
}
},
创建（）{
const myBox=此。$refs.visuraBox
this.myBoxWidth=myBox.offsetWidth；
}
}
@导入“@/assets/design/components/_form.scss”；

显然，在这种情况下ref还不存在，所以我的答案是，如何在mixin中传递选择器？（顺便说一句，我不想在全球范围内宣布mixin）

你就快到了

我建议您在mixin中添加一个方法，处理mixin挂载钩子中已有的内容：

listenForResize(selector) {
    selector.addEventListener('resize', this.setBoxWidth);
}

然后您可以从原始组件的挂载钩子调用这个新方法