在 vue 中，将函数传递给组件的方法有：1. 使用 v-bind 和事件处理程序；2. 使用 props；3. 使用 $emit。

Vue 组件如何传递函数

在 Vue.js 中，可以通过以下方法将函数传递给组件：

1. 父组件中使用 v-bind 和事件处理程序

<template><child-component></child-component></template><script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleFoo() {
      console.log('Foo function has been called from child component!');
    }
  }
}
</script>

在子组件中，可以使用 @foo 事件处理程序来访问父组件中定义的函数。

立即学习“前端免费学习笔记（深入）”；

2. 父组件中使用 props

<template><child-component :foo="handleFoo"></child-component></template><script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleFoo() {
      console.log('Foo function has been called from child component!');
    }
  }
}
</script>

<template><child-component :foo="() =&gt; handleFoo()"></child-component></template><script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleFoo() {
      console.log('Foo function has been called from child component!');
    }
  }
}
</script>

使用 props 可以更显式地将函数传递给子组件。

3. 子组件中使用 $emit

<template><child-component></child-component></template><script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleFoo() {
      this.$emit('foo');
    }
  }
}
</script>

<template><child-component></child-component></template><script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleFoo() {
      console.log('Foo function has been called from child component!');
    }
  }
}
</script>

可以使用 $emit 从子组件中触发事件，并在父组件中使用事件处理程序来调用函数。

以上就是vue组件怎么传函数的详细内容，更多请关注php中文网其它相关文章！