Vue 组件中 HTML 元素 id 的范围答案

【问题标题】：Scoping of HTML element id in Vue componentVue 组件中 HTML 元素 id 的范围
【发布时间】：2019-10-28 20:16:58
【问题描述】：

Vue 组件是否有一些内置的作用域机制，即 Vue 组件内的 html 元素的 id 属性的值可以在无需程序员努力的情况下唯一定义？

在下面的代码中，我创建了两个组件，并希望每个组件的行为彼此独立。所以，理想情况下，如果我点击每个按钮，每个按钮都需要打印出“foo”，但实际上并不是因为 id 的值是重复的。

<!DOCTYPE html>

<head>
    <title></title>
</head>

<body>
    <div id="app">
        <my-comp></my-comp>
        <my-comp></my-comp>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script>
        Vue.component('my-comp', {
            template: `
                <div>
                    <button id="btn" @click="onClick">Click me</button>
                    <div id="pid"></div>
                </div>
            `,
            methods: {
                onClick(e) {
                    $('#pid').text("foo");
                }
            },
        });

        const vm = new Vue({
            el: '#app',
            data: () => ({}),
            methods: {}
        });
    </script>
</body>

</html>

【问题讨论】：

你检查过这个包吗？ npmjs.com/package/vue-uniq-ids
哦，非常感谢。这正好解决了这类问题。很高兴知道我并不孤单，有同样的问题。
好的，很高兴为您提供帮助！然后我将其发布为答案。

标签： vue.js attributes components

【解决方案1】：

不要在 vue 组件中使用 id，除非你使用 props 为它传递一个唯一的值。你应该很少需要在 vue 中获取一个元素的引用，如果你确实需要，那么你应该使用refs。

在您的情况下，您可以只使用属性和模板绑定来为您处理事情：

Vue.component('my-comp', {
    template: `
                <div>
                    <button @click="onClick">Click me</button>
                    <div>{{ text }}</div>
                </div>
            `,
    data() {
        text: ''
    },
    methods: {
        onClick(e) {
            this.text = 'foo'
        },
    },
})

【讨论】：

实际上我正在考虑将 hicharts.js 图表包装在 Vue 组件中，而 highcarts 图表 API 需要 DOM 元素或字符串中的 id。如果不推荐使用 id，有没有办法为
{{ text }}
获取 DOM 元素？我刚刚尝试过，似乎不允许在 Vue 组件中使用 ref。
你还会在哪里使用 ref？它旨在快速参考组件内的元素。你可以在挂载的生命周期钩子和方法中使用它。就个人而言，我会选择Highcharts in Vue 的现有实现之一。
感谢您的提示。我将仔细看看 ref 是如何使用的。非常感谢您介绍 Highcharts Vue。
ref 效果很好。事实证明，它是 id 的完美替代品！谢谢。

【解决方案2】：

看起来vue-uniq-ids 包就是您要找的东西。

使用组件是一种趋势。组件很酷，它们很小，显而易见，易于使用和模块化。直到涉及到 id 属性。

一些 HTML 标签属性需要使用 id 属性，例如 label[for]、input[form] 和许多 aria-* 属性。而问题 id 是它不是模块化的。如果有几个 id 属性页面将具有相同的值，它们可以相互影响。

VueUniqIds 可以帮助您摆脱这个问题。它提供了集合与 id 相关的指令，其值被自动修改添加唯一字符串，同时保持属性易于阅读。

【讨论】：