组件中的 VueJS 引用不起作用答案

【问题标题】：VueJS references in a component don't work组件中的 VueJS 引用不起作用
【发布时间】：2020-02-06 21:26:21
【问题描述】：

这是我的代码的一个非常精简的版本：

<html>
    <head>
        <script src="file:///D:/OtherWork/javascript/vue/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <Dial style="width: 120px; height: 120px;" v-model="src_value"></Dial>
        </div>

        <script>
            Vue.component('Dial', {
                template: '<canvas ref="dial_canvas"></canvas>',
                data: function () {
                    return {
                        value: 0,
                        centre: { x: 0, y: 0 },
                        canvas: null
                    }
                },
                props: ['value'],
                mounted: function() {
                    console.log(this.$refs.dial_canvas);
                },
                render: function() {
                    // TODO: Draw on canvas here.
                }
            });

            var app = new Vue({
                el: '#app',
                data: {
                    src_value: -1
                },
                created() {
                }
            });

        </script>
    </body>
</html>

当我运行它并查看控制台日志时，this.$refs.dial_canvas 未定义。

我已经阅读了有关此的各种问题。 This question 和 this question 都说错误是试图访问 $refs（和 $el）内部 created() 而不是 mounted() 但这不是我的错误（或者它是但我修复了它） .

我找到了各种关于在组件中使用引用的文章，但无一例外，它们都使用“.vue”文件并且有一些我不理解的奇怪语法来导入组件......这对我不起作用。看起来他们正在使用一些服务器端魔法，我不希望那样。我需要（真的需要）能够使网络服务器尽可能简单 - 只是从最简单的网络服务器提供的纯旧文本文件。

我需要我的组件是可重复使用的，这样我就可以在一个页面上拥有多个显示不同值的组件。

如何在访问组件中的 refs 的同时使其尽可能简单？

附： $el 也用于指向 <canvas> 元素（在我进行一些更改之前），但它也是未定义的。

【问题讨论】：

你不能同时拥有 template 和 render 函数，只能是其中之一。
为了清楚起见，template 将被忽略，因为您有一个 render 函数。由于render 函数不返回任何内容，因此您的组件不会创建任何元素。
我按照这里的例子：alligator.io/vuejs/vue-html5-canvas
你能告诉我如何实现我想要的，即一个实际上是画布并且可以自己绘制的组件。
另外，请将您的评论作为答案，以便我接受，最好提供一些关于如何克服我的问题的线索。

标签： javascript vue.js

【解决方案1】：

正如@skirtle 所说，您不能拥有渲染功能和模板。事实上，我发现使用空的渲染函数时，Vue 会用空注释替换元素。

我还发现组件名称中的大写字母会导致问题。

我的解决方案是将我的渲染函数替换为这样的方法：

methods: {
    setValue: function(value) {
        this.value = value;
        // TODO: Draw on canvas here.
    }
},

我还在模板中的条目中添加了一个ref，当更新的值使用ref 获取组件并使用我的新setValue 方法来设置内部值并重绘画布以表示那个值。

【讨论】：