vue3父向子传函数

在Vue 3中，可以通过将函数作为props传递给子组件来实现父向子传递函数的功能。你可以在父组件中定义一个函数，并将其作为props传递给子组件。子组件可以接收该函数作为props，并在需要的时候调用该函数。

下面是一个示例，演示了如何在Vue 3中实现父向子传递函数的过程：

父组件代码（father.vue）：

<template>
  <div class="father">
    <h1>父组件</h1>
    <son :msg="message" :clickFather="clickFather"></son>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import son from "./son.vue";

export default defineComponent({
  components:{
    son,
  },
  setup () {
    const message = ref('父组件的值---张三');
    
    function clickFather(params) {
      console.log("父组件的方法被触发了", params);
    }
    
    return {
      message,
      clickFather
    }
  }
})
</script>

<style scoped>
.father {
  width: 200px;
  height:200px;
  border: 1px solid red;
}
</style>

子组件代码（son.vue）：

<template>
  <div class="son">
    <h2>子组件</h2>
    <p>{{ msg }}</p>
    <button @click="handleClick">触发父组件方法</button>
  </div>
</template>

<script>
import { defineComponent, propType } from 'vue'

export default defineComponent({
  props: {
    msg: {
      type: String,
      required: true
    },
    clickFather: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.clickFather('子组件传递的参数');
    }
  }
})
</script>

<style scoped>
.son {
  width: 150px;
  height: 100px;
  border: 1px solid blue;
}
</style>

在上面的代码中，父组件（father.vue）定义了一个名为`clickFather`的函数，并将其作为props传递给子组件（son.vue）。子组件接收到`clickFather`函数后，在按钮的点击事件中调用该函数，并传递一个参数。

这样，当子组件的按钮被点击时，就会触发父组件中的`clickFather`函数，并在控制台打印出相应的信息。