Попытка использовать ref внутри однофайлового компонента Vue. Получил неопределенное

Я начинаю с vuejs и пытаюсь понять, что можно сделать со ссылкой на экземпляр дочернего компонента в корневом экземпляре. Я использовал атрибут ref, и он работает довольно хорошо, за исключением случаев, когда я использую его в одном компоненте файла (в тегах шаблона). В этом конкретном случае я получаю «неопределенный».

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

Так что если у кого есть идеи ;)

Я использую webpack для импорта одного файлового компонента в app.js и его компиляции. Однако компиляция шаблона выполняется не веб-пакетом, а браузером во время выполнения (может быть, это начало объяснения?).

Мое приложение очень простое, и я регистрирую свои ссылки при нажатии на заголовок, поэтому я не думаю, что это связано с обратным вызовом жизненного цикла.

Вот мои файлы:

app.js

import Vue from 'Vue';
import appButton from './appButton.vue';
import appSection from './appSection.vue';


var app = new Vue({
    el: '#app',
    components:
    {
        'app-button' : appButton
    },
    methods:
    {
        displayRefs: function()
        {
            console.log(this.$refs.ref1);
            console.log(this.$refs.ref2);
            console.log(this.$refs.ref3);
        }
    }
});

мой компонент appButton.vue

<template>
    <div ref="ref3" v-bind:id="'button-'+name" class="button">{{label}}</div>
</template>


<script>

    module.exports = 
    {
        props: ['name', 'label']
    }

</script>

мое тело index.html

<body>

    <div id="app">

        <div id="background"></div>

        <div id="foreground">

            <img id="photo" src="./background.jpg"></img>

            <header ref="ref1">
                    <h1 v-on:click="displayRefs">My header exemple</h1>
            </header>


            <nav>
                <app-button ref="ref2" name="presentation" label="Qui sommes-nous ?"></app-button>
            </nav>

        </div>

    </div>

    <script src="./app.js"></script>

</body>

ref1 (тег заголовка) и ref2 (тег кнопки приложения) найдены. Но ref3 (в моем компоненте с одним файлом) не определен. Также

Спасибо за весь ответ, который вы могли мне дать, надеюсь, это не глупая ошибка.


vue.js components undefined ref vue-directives
person SimStuch    schedule 25.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Установленный вами ref доступен только в самом компоненте.

Если вы попытаетесь console.log(this.$refs.ref3); ввести метод из appButton.vue, он сработает. Но это не будет работать в родительском.

Если вы хотите получить доступ к этой ссылке от родителя, вам нужно использовать $ref2 для доступа к компоненту, а затем использовать $ref3. Попробуй это:

var app = new Vue({
    el: '#app',
    components:
    {
        'app-button' : appButton
    },
    methods:
    {
        displayRefs: function()
        {
            console.log(this.$refs.ref1);
            console.log(this.$refs.ref2);
            console.log(this.$refs.ref2.$refs.ref3); // Here, ref3 will be defined.
        }
    }
});

Доступ к некоторым дочерним элементам ref от родителя не должен быть хорошей практикой.

person Hammerbot    schedule 25.03.2019
comment
Ааа спасибо. Так что это просто невозможно, и я должен писать каждую ссылку в index.html, если я хочу получить ссылки на все мои экземпляры кнопки приложения? - person SimStuch; 25.03.2019
comment
Да, но зачем тебе это? - person Hammerbot; 25.03.2019
comment
Это не видно в приведенном мной примере, но у меня есть несколько компонентов раздела приложения, которые будут использоваться как модальные окна при нажатии кнопки приложения. Поэтому мне нужно ссылаться на каждый раздел. Но я обнаружил, что в этом.$root.$children есть все нужные мне ссылки, так что все в порядке! - person SimStuch; 26.03.2019