Vue3+ts中props和emit用法

将子组件的值传到父组件中

1、emit

子组件

 setup(props, { emit }) {
    const foo = () => {
      emit("myevent", 123);
    };
    return {
      foo,
    };
  },

 <button class="child" @click="foo"></button>

父组件

  <Child @myevent="chuanCan" />

  setup() {
    const chuanCan = (a: number) => {
      console.log(a);
    };
    return {
      chuanCan,
    };
  },

2、props

子组件

 props:{
      foo:{
          type:Function,
          required:true
      }
  },
  setup(props){
      const print=()=>{
          props.foo(123)
      }
      return{
          print
      }
  }

<button class="child" @click="print"></button>

父组件

  <Child :foo="chuanCan" />

 setup(){
      const chuanCan=(a:number)=>{
          console.log(a);
          
      }
      return{
          chuanCan
      }
  }

输出结果