Vue-使用ref访问嵌套子级 [英] Vue - access nested childs using ref

问题描述

我有vue组件，可以在自己内部使用-数据可以具有带有子元素的数组，并且我可以使用此数组根据嵌套级别将它们呈现为循环，下一级别，下一级别等.

I have vue component which I use inside himself - data can have array with subelements and I use this array to render them in loop, and next level, next level etc. according to nesting level.

现在，我想从父级运行子级方法，然后-如果语句正常，还可以将其调用给子级，下一级等.

Now I would like to run child method from parent and then - if statements are ok, also call it to child, next level etc.

我使用

    <mycomponent
            ref="myFirstLevelRefName"
            (...)
    ></mycomponent>

然后:

this.$refs.myFirstLevelRefName 

呼叫一级孩子.但是子节点呢?我以这种方式在视图中使用它们:

to call first-level childs. But what about about child nodes? I use them in view in that way:

    <mycomponent
            v-for="(subElement, index) in getSubelements()"
            ref="???"
            v-bind:data="subElement"
            v-bind:key="index"
    ></mycomponent>

我尝试将this.$ refs从子级别发送到控制台，但它为空.

I tried sent this.$refs from child level to console, but it's empty.

我应该如何在嵌套元素中设置引用名称，然后从父级调用它们?

How should I set ref name in nested elements and then call them from parent?

推荐答案

虽然在技术上可以访问嵌套子级的$refs ...

While it is technically possible to access $refs of nested children...

Vue.component('mycomponent', {
    template: "#mycomponent",
});

new Vue({
  el: '#app',
  mounted() {
    console.log(
      'Second level <input>\'s value:',
      this.$refs.myFirstLevelRefName.$refs.mySecondLevelRefName.value
    )
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<template id="mycomponent">
    <div>
        <input ref="mySecondLevelRefName" value="Hello">
    </div>
</template>

<div id="app">
  <mycomponent ref="myFirstLevelRefName"></mycomponent>
</div>

在简单的情况下，执行父级/深子级或深层祖先/兄弟级交流的一种方法是使用事件中心. (对于复杂的情况，请参见 Vuex .)

A way of performing parent/deep child, or deep ancestor/sibling communication, for simple scenarios, is using an event hub. (For complex scenarios, see Vuex.)

您将创建一个全局变量:

You would create a global variable:

var eventHub = new Vue(); // use a Vue instance as event hub

要发出事件，可以在任何组件中使用

To emit events you would use in any component:

eventHub.$emit('myevent', 'some value');

然后，您将在任何其他组件中侦听该事件.该事件的操作可能是任何事情，包括方法调用(您想要的是):

You would, then, in any other component, to listen to that event. The action of that event could be anything, including a method call (which is what you want):

eventHub.$on('myevent', (e) => {
    console.log('myevent received', e)
    // this.callSomeMethod();
});

演示:

var eventHub = new Vue(); // use a Vue instance as event hub

Vue.component('component-first', {
    template: "#component-1st",
    methods: {
      myMethod() {
        eventHub.$emit('myevent', 'some value');
      }
    }
});
Vue.component('component-second', {template: "#component-2nd"});
Vue.component('component-third', {
  template: "#component-3rd",
  created() {
    eventHub.$on('myevent', (e) => {
      this.check();
    });
  },
  methods: {
    check() {
      console.log('check method called at 3rd level child');
    }
  }
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<template id="component-1st">
    <div>
        1st level component
        <button @click="myMethod">Trigger event at 1st level component that will call 3rd level child's method</button>
        <hr>
        <component-second></component-second>
    </div>
</template>
<template id="component-2nd">
    <div>
        <component-third></component-third>
    </div>
</template>
<template id="component-3rd">
    <div><h1>3rd level child</h1></div>
</template>

<div id="app">
  <component-first></component-first>
</div>

注意:如果在环境中创建专用实例作为事件中心很麻烦，则可以将eventHub替换为this.$root(在组件内部)，并使用自己的Vue实例作为中心

Note: If creating a dedicated instance as event hub is something complicated in your environment, you can replace eventHub with this.$root (inside your components) and use your own Vue instance as hub.

这篇关于Vue-使用ref访问嵌套子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！