Question

我有自己内部使用的vue组件 - 数据可以包含子元素的数组，我使用这个数组在循环中渲染它们，然后根据嵌套级别渲染下一级，下一级等。

现在我想从父级运行子方法然后 - 如果语句没问题，也可以将它调用到子级，下一级等。

我用

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

然后：

this.$refs.myFirstLevelRefName

打电话给第一级孩子。但是关于子节点呢？我以这种方式在视野中使用它们：

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

我试过发送过这个。$ refs从子级到控制台，但它是空的。

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

Answer 1

虽然技术上可以访问$refs嵌套子项......

＆＃13;

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

＆＃13;

<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>

＆＃13;

对于简单方案，执行父/深子或深祖/兄弟通信的方法是使用事件中心。（对于复杂方案，请参阅Vuex。）

您将创建一个全局变量：

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

发出您将在任何组件中使用的事件：

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

然后，您可以在任何其他组件中收听该事件。该事件的行为可以是任何事情，包括方法调用（这是您想要的）：

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

<强>演示：

＆＃13;

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!'
  }
})

＆＃13;

<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>

＆＃13;

注意：如果在您的环境中创建专用实例作为事件中心是一件很复杂的事情，您可以将eventHub替换为this.$root（在您的组件中）并使用您自己的Vue实例作为集线器。

Vue - 使用ref访问嵌套的子级

1 个答案: