Question

我从vuejs开始，我尝试弄清楚在根实例中引用子组件实例可以做什么。我使用了ref属性，并且效果很好，除非我在单个文件组件中（在模板标签中）使用它。在这种情况下，我会得到“未定义”。

因此，我尝试理解原因，因为它对于建立动态引用可能非常有用。我可能可以轻松地绕过这种情况，但我想了解问题而不是逃之

所以，如果有人有一个主意;）

我正在使用webpack将单个文件组件导入到我的app.js中并对其进行编译。但是，模板编译不是由webpack完成，而是由运行时的浏览器完成（也许这是解释的开始？）。

我的应用程序非常简单，我单击标题时记录了我的引用，因此我认为它与生命周期回调无关。

这是我的文件：

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（在我的单个文件组件中）未定义。也是

感谢您能给我所有答案，希望这不是一个愚蠢的错误。

Answer 1

您设置的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并不是一个好习惯。

尝试在Vue单个文件组件内使用ref。不确定

1 个答案: