props & $emit

非setup语法题 setup(props,{emit})

export default defineComponent({
  props: {
    msg: String,
    sendNum:Number
  },
  setup(props,{emit}){
    //获取父组件数据，此时不是动态的，如果是对象则是。
    //如果需要动态则需要watch监听myNum
    let myNum = props.sendNum +1
    //触发父组件方法
    emit('say','dan啊')
    return{
      myNum,
    }
  }
});
</script>

setup语法题

defineProps 接受父组件数据(props)

不需要使用setup函数 props，emit怎么获取呢?

<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <p>信息:{{ info}}</p>
        <p>{{ time }}</p>
    </div>
</template>
<script lang="ts" setup>
  //1.可以不引入defineProps
  //2.可以不写toRefs就可以直接使用
  //3.只需要defineProps({})即可
  import {defineProps ,toRefs} from 'vue'
  const props = defineProps({
      info:{
          type:String,
          default:'----'
      },
      time:{
          type:String,
          default:'0分钟'
      },
  })
  const {info,time } = toRefs(props)
</script>

defineEmits 向父组件抛出事件($emit)

<script lang="ts" setup>
 import {defineEmits} from 'vue'
  //  使用defineEmits创建名称，接受一个数组
  let $myemit=defineEmits(['myAdd','myDel'])
  //触发父组件事件
  let hander1Click=():void=>{
    $myemit('myAdd','新增的数据')
  }

  let hander2Click=():void=>{
    $myemit('myDel','删除的数据')
  }
</script>