Question

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>

Answer 1

请勿在vue组件中使用id，除非您使用prop为其传递唯一值。您实际上很少需要真正引用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'
        },
    },
})

Answer 2

您正在寻找vue-uniq-ids软件包。

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

某些HTML标记属性需要使用id属性，例如   标签[for]，输入[form]和许多aria- *属性。还有问题   ID是它不是模块化的。如果多个id属性   页面将具有彼此影响的相同值。

VueUniqIds帮助您摆脱此问题。它提供了一套   与ID相关的指令，其值由   添加唯一的字符串，同时保持属性的可读性。

Vue组件中HTML元素ID的作用域

2 个答案: