vue2子组件调用父组件传递prop得函数

书中自有妍如玉

已于 2024-08-15 16:56:43 修改

阅读量211

点赞数 3

文章标签： java 前端 javascript

于 2024-08-15 16:48:10 首次发布

本文链接：https://blog.csdn.net/qq_26695613/article/details/141226310

版权

在Vue中，props是父组件与子组件通信的桥梁。而prop的type选项可以用来指定传入的数据类型，以确保数据的正确性。

当prop的type为function时，这意味着父组件需要传递一个函数给子组件，子组件可以在适当的时候调用这个函数。

以下是一个简单的例子，演示了如何定义一个prop，其类型为function：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>
 
<script>
export default {
  props: {
    // 定义一个名为 parentMethod 的 prop，其类型为函数
    parentMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    callParentMethod() {
      // 调用父组件传递的方法
      this.parentMethod('这是一个参数');
    }
  }
}
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div>
    <child-component :parent-method="parentMethod"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod(arg) {
      // 父组件的方法
      console.log('父组件的方法被调用，参数是：', arg);
    }
  }
}
</script>