Передача свойства ref в дочерний компонет

Question

Всем привет, проблема такая: есть родительский компонент, в нем есть реф на элемент, хочу передать в дочерний компонент свойство рефа и уже внутри дочернего компонента с ним работать. Как это сделать максимально правильно и корректно? Всем спасибо за ответы

Vue.component('child', {
    props: ['width'],
    template: `<div>{{ value }}</div>`,
    data() {
        return {
            value: null
        }
    },
    created() {
        this.value = this.width * 2;
    }
})

new Vue({
    el: '#app',
    data: {
        width: null
    },
    mounted() {
        this.width = this.$refs.circle.offsetWidth;
    }
})

.circle {
    width: 100px;
    height: 100px;
    background-color: tomato;
    border-radius: 50%;
}

<div id="app">
    <div ref="circle" class="circle"></div>
    <child :width="width" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

Answer 1

Самый простой способ: Передайте $refs.element в пропсы дочернего компонента. https://ru.vuejs.org/v2/guide/components-props.html
Если потомок не прямой, то можно использовать provide/inject. https://v3.ru.vuejs.org/ru/guide/component-provide-inject.html
Используйте Vuex. Сохраните данные в store и получите их в нужном компоненте. https://vuex.vuejs.org/guide/state.html

БЛОГ НА HUSL

Передача свойства ref в дочерний компонет

Ответы (1 шт):