Vue3+ts中props和emit用法

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

1、emit

子组件

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

父组件

  

  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
      }
  }

父组件

  

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

输出结果

Vue3+ts中props和emit用法_第1张图片

 

你可能感兴趣的:(typescript,javascript,前端)