时间戳

首页 > 解决方案 > 组件中的 VueJS 引用不起作用

javascript - 组件中的 VueJS 引用不起作用

问题描述

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

<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未定义。

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

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

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

如何在保持组件尽可能简单的同时访问组件中的引用？

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

标签： javascriptvue.js

解决方案

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

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

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

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

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

推荐阅读