无法在组件方法中访问 $refs答案

【问题标题】：Unable to access $refs in component method无法在组件方法中访问 $refs
【发布时间】：2021-04-17 20:05:00
【问题描述】：

当单击元素时，我正在尝试访问在模板中定义的引用。这是我的 HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
        <script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <site-nav></site-nav>
        </div>
        <script src="js/vjs.js"></script>
    </body>
</html>

这是我的 Vue 代码

var siteNav = Vue.component("site-nav", {
    template: `<div v-on:click="testMethod">Click me</div>
    <div ref="testref"></div>`,
    methods: {
        testMethod: function(event) {
            console.log(self.$refs);
        },
    },
});


var app = new Vue({
    el: "#app",
});

单击“单击我”元素时，控制台日志显示组件元素的$refs 不可访问。我认为这可能是因为范围问题，或者因为方法在渲染之前没有看到 refs。

这里发生了什么？我知道我错过了一些简单的东西。谢谢！

【问题讨论】：

标签： javascript html vue.js vuejs2 axios

【解决方案1】：

在 vue 2 中，你应该用一个根元素（html 或 Vue 组件）来包装你的组件模板，例如：

var siteNav = Vue.component("site-nav", {
    template: `<div><div v-on:click="testMethod">Click me</div>
    <div ref="testref"></div></div>`,
   
});

然后使用引用组件实例的this 访问$refs：

console.log(this.$refs);

var siteNav = Vue.component("site-nav", {
    template: `<div><div v-on:click="testMethod">Click me</div>
    <div ref="testref">test</div></div>`,
    methods: {
        testMethod: function(event) {
            console.log(this.$refs.testref);
        },
    },
});


var app = new Vue({
    el: "#app",
});

<html lang="en">
    <head>
        <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
        <script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <site-nav></site-nav>
        </div>
        <script src="js/vjs.js"></script>
    </body>
</html>

【讨论】：