时间戳

首页 > 解决方案 > Vue 组件中 HTML 元素 id 的作用域

vue.js - Vue 组件中 HTML 元素 id 的作用域

问题描述

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>

标签： vue.jsattributescomponents

解决方案

不要id在 vue 组件中使用，除非您使用 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'
        },
    },
})

推荐阅读