Question

这是我的代码的精简版本：

<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”文件，并且有些不明白的语法使我无法导入组件...这对我不起作用。看起来他们在使用某些服务器端魔术，但我不希望如此。我需要（确实需要）能够使Web服务器尽可能简单-仅使用最简单的Web服务器提供的纯文本文件。

我需要组件可以重复使用，以便页面上可以有多个组件，每个组件都显示不同的值。

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

P.s。 $el也曾经指向<canvas>元素（在我进行一些更改之前），但是它也是未定义的。

Answer 1

正如@skirtle所说，您不能具有渲染功能和模板。实际上，我发现Vue使用一个空的render函数，用一个空的注释替换了该元素。

我还发现组件名称中的大写字母引起了问题。

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

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

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

组件中的VueJS引用不起作用

1 个答案: