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

Question

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

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

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

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

原文由 al3x 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 所示的 事件总线。下面是通过将总线作为道具传递来使用事件总线的另一个示例。

 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/

原文由 Desmond Lua 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

对于版本 >= 3.2.0

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

defineExpose({
    doSomething
})
</script>

设置功能

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

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

        context.expose({ doSomething })
    }
})
</script>

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

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

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

        return { doSomething }
    }
})
</script>

原文由 wobsoriano 发布，翻译遵循 CC BY-SA 4.0 许可协议