無法訪問組件方法中的 $refs

Question

單擊元素時，我試圖訪問在模板中定義的引用。 這是我的 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不可訪問。 我認為這可能是由於 scope 問題而發生的，或者是因為這些方法在呈現之前沒有看到引用。

這里發生了什么？ 我知道我錯過了一些簡單的東西。 謝謝！

Answer 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>

無法訪問組件方法中的 $refs

問題描述

1 個解決方案

解決方案1
2 已采納 2021-01-12 20:09:00

無法訪問組件方法中的 $refs

問題描述

1 個解決方案

解決方案1 2 已采納 2021-01-12 20:09:00

解決方案1
2 已采納 2021-01-12 20:09:00