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

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

0 голосов
/ 25 марта 2019

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

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

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

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

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

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

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 

<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 (в моем отдельном файловом компоненте) не определен. Также

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

1 Ответ

0 голосов
/ 25 марта 2019

A 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 от родителей не должен быть хорошей практикой, хотя

...