如何从 vue.js 中的父级访问子方法

Question

我有两个嵌套组件，从父级访问子方法的正确方法是什么？

this.$children[0].myMethod() 似乎可以解决问题，但它很丑，不是吗，还有什么更好的方法：

<script>
import child from './my-child'

export default {
  components: {
   child
  },
  mounted () {
    this.$children[0].myMethod()
  }
}
</script>

Answer 1

您可以使用ref。

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {}
  },
  template: `
  <div>
     <ChildForm :item="item" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.$refs.form.submit()
    }
  },
  components: { ChildForm },
})

如果您不喜欢紧耦合，您可以使用@Yosvel Quintero 所示的Event Bus。下面是另一个使用事件总线的例子，通过将总线作为道具传递。

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {},
    bus: new Vue(),
  },
  template: `
  <div>
     <ChildForm :item="item" :bus="bus" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.bus.$emit('submit')
    }
  },
  components: { ChildForm },
})

组件代码。

<template>
 ...
</template>

<script>
export default {
  name: 'NowForm',
  props: ['item', 'bus'],
  methods: {
    submit() {
        ...
    }
  },
  mounted() {
    this.bus.$on('submit', this.submit)
  },  
}
</script>

https://code.luasoftware.com/tutorials/vuejs/parent-call-child-component-method/

Answer 2

VueJS 中的父子通信

假设所有后代都可以通过this.$root 访问根Vue 实例，父组件可以通过this.$children 数组访问子组件，而子组件可以通过this.$parent 访问它的父组件，您的第一直觉可能是直接访问这些组件。

VueJS 文档对此特别提出警告，原因有两个：

• 它将父母与孩子紧密结合（反之亦然）
• 您不能依赖父级的状态，因为它可以修改 通过子组件。

解决方法是使用Vue的自定义事件接口

Vue 实现的事件接口允许你在组件树上下通信。利用自定义事件接口，您可以访问四种方法：

1. $on() - 允许你在你的 Vue 实例上声明一个监听器来监听事件
2. $emit() - 允许您在同一实例（自身）上触发事件

使用$on() 和$emit() 的示例：

const events = new Vue({}),
    parentComponent = new Vue({
      el: '#parent',
      ready() {
        events.$on('eventGreet', () => {
          this.parentMsg = `I heard the greeting event from Child component ${++this.counter} times..`;
        });
      },
      data: {
        parentMsg: 'I am listening for an event..',
        counter: 0
      }
    }),
    childComponent = new Vue({
      el: '#child',
      methods: {
      greet: function () {
        events.$emit('eventGreet');
        this.childMsg = `I am firing greeting event ${++this.counter} times..`;
      }
    },
    data: {
      childMsg: 'I am getting ready to fire an event.',
      counter: 0
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>

<div id="parent">
  <h2>Parent Component</h2>
  <p>{{parentMsg}}</p>
</div>

<div id="child">
  <h2>Child Component</h2>
  <p>{{childMsg}}</p>
  <button v-on:click="greet">Greet</button>
</div>

答案取自原帖：Communicating between components in VueJS

Answer 3

建议的解决方案适用于 Vue 2，但如果您最终在这里寻找 Vue 3 组合 API 解决方案，您可以在迁移时执行以下操作：

模板中的子组件，具有“doSomething”方法：

 <div class="form">                                                                                                                                                        
      <child-component ref="childComponentRef" />                                                                      
</div>  

使用 Vue 2：

this.$refs.childComponentRef.doSomething( );
       

使用 Vue 3 组合 API：

    setup( )
    {
        const childComponentRef = ref( );

        childComponentRef.value.doSomething( )

        return {
           childComponentRef
        }
     }  

Answer 4

如果你最终在这里寻找 Vue 3 script setup

<!-- Parent -->
<template>
    <ChildComponent ref="childComponentRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ChildComponent from './components/ChildComponent.vue'

const childComponentRef = ref()

onMounted(() => {
    childComponentRef.value.doSomething()
})
</script>

<!-- Child -->
<script setup>
const doSomething = () => {
    console.log('Im batman')
}

// Only available in Vue >= 3.1.3
// No need to import
defineExpose({
    doSomething
})
</script>

如果您的 Vue 版本是 < 3.1.3，则必须使用 setup 函数并返回 doSomething 函数才能在父组件中访问它。

<!-- Child -->
<script>
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {
        const doSomething = () => {
            console.log('Im batman')
        }

        return { doSomething }
    }
})
</script>

Answer 5

当您的控件渲染受v-if 影响时，Ref 和事件总线都会出现问题。所以，我决定采用更简单的方法。

这个想法是使用数组作为队列来发送需要调用的方法到子组件。一旦组件被挂载，它将处理这个队列。它监视队列以执行新方法。

（从 Desmond Lua 的答案中借用一些代码）

父组件代码：

import ChildComponent from './components/ChildComponent'

new Vue({
  el: '#app',
  data: {
    item: {},
    childMethodsQueue: [],
  },
  template: `
  <div>
     <ChildComponent :item="item" :methods-queue="childMethodsQueue" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.childMethodsQueue.push({name: ChildComponent.methods.save.name, params: {}})
    }
  },
  components: { ChildComponent },
})

这是 ChildComponent 的代码

<template>
 ...
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    methodsQueue: { type: Array },
  },
  watch: {
    methodsQueue: function () {
      this.processMethodsQueue()
    },
  },
  mounted() {
    this.processMethodsQueue()
  },
  methods: {
    save() {
        console.log("Child saved...")
    },
    processMethodsQueue() {
      if (!this.methodsQueue) return
      let len = this.methodsQueue.length
      for (let i = 0; i < len; i++) {
        let method = this.methodsQueue.shift()
        this[method.name](method.params)
      }
    },
  },
}
</script>

还有很大的改进空间，比如将 processMethodsQueue 移动到 mixin...

Answer 6

我喜欢 mohghaderi 的回答，但我遇到了几个问题，所以我将使用他的示例代码来展示我需要进行的更改以使其正常工作。 （在我自己的项目中，我使用的是 Vue 3 和 Options API。）

mohghaderi 的父组件代码以及关于我的更改的注释：

import ChildComponent from './components/ChildComponent'

new Vue({
  el: '#app',
  data: {
    item: {},
    childMethodsQueue: [],
  },
  // Note: In the template below, I added @child-methods-finished="childMethodsFinished" 
  //       as an event listener, so that we can reset the childMethodsQueue array to
  //       empty once the methods are finished.
  //       If you don't reset it, then the methods stay in there and cause problems.
  template: `
  <div>
     <ChildComponent :item="item" 
                     :methods-queue="childMethodsQueue"
                     @child-methods-finished="childMethodsFinished" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.childMethodsQueue.push({
        name: ChildComponent.methods.save.name,
        params: {}  // Note: delete the {} and put the name of your params, if you use a method that passes in params.
      })
    }
  },
  components: { ChildComponent },
})

mohghaderi 的子组件代码以及关于我的更改的注释：

import { objectToString } from "@vue/shared"

export default {
    name: 'ChildComponent',
    props: {
      methodsQueue: { type: Array },
    },
    // Note:  I had to rewrite the watch option because it would not trigger.
    //        You have to add "deep, true" for arrays and objects.
    //        The function has to be called "handler" for it to work as well.
    watch: {
      methodsQueue: {
        handler() {
          this.processMethodsQueue()
        },
        deep: true,
      }
    },
    // Note:  Remove "mounted()" function if you don't want it to run on the mounted event.
    mounted() {
      this.processMethodsQueue()
    },
    methods: {
      save() {
          console.log("Child saved...")
      }, 
      processMethodsQueue() {
        if (!this.methodsQueue) return
        let len = this.methodsQueue.length

        if (!len) return  // Note:  This is required to prevent an infinite loop.
                          //        When we reset the childMethodsQueue array to empty,
                          //        it will trigger this method through the watch option,
                          //        so we need this in order to stop the cycle once we are done.

        // Note:  Instead of using ".shift()" to access an item in the array
        //        we need to use "[i]" otherwise we will get muliple calls of the method
        for (let i = 0; i < len; i++) {
          let method = this.methodsQueue[i]
          this[method.name](method.params)
        }

        // Note:  Now that we are done calling methods, we need to emit an event back to the parent
        //        so it can call it's method to reset the childMethodsQueue array to empty
        this.$emit('child-methods-finished')
      },
    },
  }

Answer 7

为了将子组件与另一个子组件通信，我在父组件中创建了一个方法，该方法调用子组件中的方法：

this.$refs.childMethod()

我从另一个孩子那里调用了 root 方法：

this.$root.theRootMethod()

它对我有用。