vue组件怎么传函数

在 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.<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15721.html" target="_blank">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组件怎么传函数的详细内容，更多请关注叮当号网其它相关文章！