Ссылка Vue в компоненте без рендеринга

Question

У меня есть проблема, когда не работает связывание ref в компоненте без рендеринга.Я пытался добавить class в instance object и class, но ref этого не произошло.Я также попытался войти this.$refs, и он просто возвращает пустой объект.

App.vue

<template>
  <div id="app">
    <renderless>
      <div slot-scope="{ instance, logger }">
        <div v-bind="instance"></div>

        <button @click="logger('One')">One</button>
        <button @click="logger('Two')">Two</button>
      </div>
    </renderless>
  </div>
</template>

<script>
import Renderless from "./components/Renderless";

export default {
  components: {
    Renderless
  },
};
</script>

компоненты / Renderless.vue

<script>
export default {
  render(h) {
    return this.$scopedSlots.default({
      instance: {
        ref: 'container'
      },
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      console.log(this.$refs)
    },
    logger(value) {
      console.log(value)
    },
  },
};
</script>

Как связать ref, чтобы дочерний компонент знал, на какой элемент нацелиться или какие-либо другие лучшие решения / предложения?

Кстати, код BTW также доступен на codesandbox .

Answer 1

Вы можете использовать querySelector и querySelectorAll, чтобы выбрать то, что вы хотите в дочернем компоненте.this.$el должен предоставлять базовый элемент дочернего класса после монтирования компонента.

init () {
  const buttons = this.$el.querySelectorAll('button');
  buttons.forEach(button => {
    // access each button
  });

  // fetches an item by element id
  const itemById = this.$el.querySelector('#elementid');

  // fetches by classes
  const itemsByClass = this.$el.querySelector('.className');
}