将带参数的函数传递给子组件

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  // 定义带参数的函数
  handleClick = (param) => {
    // 在此处处理传递的参数
    console.log(param);
  }

  render() {
    return (
      <div>
        {/* 将函数作为props传递给子组件 */}
        <ChildComponent handleClick={this.handleClick} />
      </div>
    );
  }
}

// 子组件
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.handleClick('参数')}>点击按钮</button>
    );
  }
}

<!-- 父组件 -->
<template>
  <div>
    <!-- 将方法作为props传递给子组件 -->
    <child-component :handle-click="handleClick" />
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';
  export default {
    components: {
      ChildComponent
    },
    methods: {
      // 定义带参数的方法
      handleClick(param) {
        // 在此处处理传递的参数
        console.log(param);
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick('参数')">点击按钮</button>
</template>

<script>
  export default {
    props: ['handleClick']
  }
</script>