事件绑定触发

1、vue App.vue

<template>
  <div id="app">
   <div @click="clickfun">Hello</div>
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
    }
  },
  methods:{
    
    clickfun(){
    
      console.log('事件触发');
    }
  }
}
</script>

<style>
</style>

2、react App.js

import React from "react"
//函数式组件
function Hello () {
    
  //定义的函数 
  const clickfun = () => {
    
    console.log('函数组件的事件被触发了')
  }
   // function clickfun () {
    
  // console.log('函数组件的事件被触发了')
  // }
  return <div onClick={
    clickfun}>Hello,函数式组件</div>
}


//类组件
class HelloComponent extends React.Component {
    
  //定义的函数 需要用箭头函数语法
  clickfun = () => {
    
    console.log('类组件的事件被触发了')
  }
   //如果不用箭头函数 需要如下改变this指向
  // clickfun() {
    
  // console.log('类组件的事件被触发了')
  // }
  // constructor() {
    
  // super()
  // this.clickfun = this.clickfun.bind(this)
  // }
  render () {
    
    return <div onClick={
    this.clickfun}>Hello,类组件</div>
  }
}


function App () {
    
  return (
    <div className="App">
      {
    /* 使用方式跟vue组件一样 */}
      <Hello></Hello>
      <HelloComponent></HelloComponent>
    </div>
  )
}

export default App

传参时react需要将其改造成箭头函数

import React from "react"
//函数式组件
function Hello () {
    
  //定义的函数
  const clickfun = (msg) => {
    
    console.log(msg);
    console.log('函数组件的事件被触发了')
  }
  //改造成箭头函数
  return <div onClick={
    () =>clickfun('hhhh')}>Hello,函数式组件</div>
}


//类组件
class HelloComponent extends React.Component {
    
  //定义的函数
  clickfun = (msg) => {
    
    console.log(msg);
    console.log('类组件的事件被触发了')
  }
  render () {
    
    //改造成箭头函数
    return <div onClick={
    ()=>this.clickfun('hhhh')}>Hello,类组件</div>
  }
}


function App () {
    
  return (
    <div className="App">
      {
    /* 使用方式跟vue组件一样 */}
      <Hello></Hello>
      <HelloComponent></HelloComponent>
    </div>
  )
}

export default App

而vue直接传

<template>
  <div id="app">
   <div @click="clickfun('hhh')">Hello</div>
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
    }
  },
  methods:{
    
    clickfun(msg){
    
      console.log(msg);
      console.log('事件触发');
    }
  }
}
</script>

<style>
</style>