Question

您好，我如何通过className或其他方式获取元素。所以我实际上需要按className获取元素，但是在这种情况下我不知道该怎么做：

这是我的小提琴：https://jsfiddle.net/cihanzengin/aq9Laaew/294154/ 我想简单地做到这一点：当单击方法中的菜单时，我尝试获取具有类名nav的元素。我尝试用ref做，但是我不能

这是我的代码：

<div id="app">
        <some-component  @get-element="getElement"></some-component>
    </div>

    <script>
        var someComponent = Vue.component("some-component", {
        template: `
            <div class="columns mobile-navigation">
            <div class="column drawer">
                <a class="is" @click="$emit('get-element')">MENU</a>
            </div>
            <div ref="nav" class="column mobile-nav-wrapper">
                <p> Some Text </p>
            </div>
            </div>
        `
        });

        var app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            "mobile-nav": mobileNav
        },
        methods: {
            getElement() {
            console.log(this.$refs.nav);
            }
        }
        });
    </script>

Answer 1

您可以尝试这样的事情。

var classToCheck = 'myclass';

if( this.$refs.nav.classList.includes(classToCheck) ){
 // includes above class
}

OR

myclickevent(event){

    event.target.classList // this will get you classList of of clicked element then you can compare

}

这包含您元素的所有类

this.$refs.nav.classList

Answer 2

我找到了解决方法：

这里需要在引用属性中添加**<some-component>**以便访问jsx内的引用。

然后可以使用this.$refs.someRef.$refs.nav

访问nav ref

<div id="app">
        <some-component  @get-element="getElement" ref="someRef"></some-component>
    </div>

    <script>
        var someComponent = Vue.component("some-component", {
        template: `
            <div class="columns mobile-navigation">
            <div class="column drawer">
                <a class="is" @click="$emit('get-element')">MENU</a>
            </div>
            <div ref="nav" class="column mobile-nav-wrapper">
                <p> Some Text </p>
            </div>
            </div>
        `
        });

        var app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            "mobile-nav": mobileNav
        },
        methods: {
            getElement() {
            console.log(this.$refs.someRef.$refs.nav);
            }
        }
        });
    </script>

Vue在单击时发出另一个元素的引用

2 个答案: