vue3中defineEmits与defineProps的用法实例

// ts 专有
const emits= defineEmits<{
    (e: 'increase', num: number): void
}>()

// js
let emits = defineEmits(['startChange', 'endChange'])

emits('increase', 1);

<template>
  <section class="parent">
    <childVue :num="nums" @increase="handleIncrease"></childVue>
  </section>
</template>

<script setup>
  import childVue from './child.vue';
  import { ref } from 'vue';
  const nums = ref(0);
    
  // 回调函数
  const handleIncrease = (num: number) => {
    nums.value += num;
  };
</script>

<template>
  <section class="box" @click="handelClick">{{ num }}</section>
</template>

<script setup>
// ts 专有
const emits= defineEmits<{
    (e: 'increase', num: number): void
}>()
            
const handelClick = () => {
    emits('increase', 1);
};
</script>

<template>
    <div class="Father">
        <p>我是父组件</p>
        <!--  -->
        <son :ftext="ftext"></son>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
import Son from './son.vue'
const ftext = ref('我是父组件-text')
</script>

<template>
    <div class="Son">
        <p>我是子组件</p>
       <!-- 展示来自父组件的值 在这里直接使用-->
       <p>接收到的值：{{ftext}}</p>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
// se

//defineProps 来接收组件的传值
const props = defineProps<{
    ftext: string,
}>()

// 复杂写法
const props = defineProps<{
    ftext: {
        type: string,
        required: false,
        default: 'hhh'
    }
}>()


// 在这里就用 props.sideCollapse
</script>

<script setup lang="ts">
import { ref } from 'vue'

let sideCollapse = ref(false)
</script>

<template>
    <nav-header v-model:sideCollapse="sideCollapse"></nav-header>
</template>

const props = defineProps<{
    sideCollapse: boolean,
}>()

// let emits = defineEmits(['update:sideCollapse'])  js写法

// ts写法
const emits = defineEmits<{
    (e: 'update:sideCollapse', sideCollapse: boolean): void
}>()


function toggle() {
    // props.sideCollapse = !props.sideCollapse  不能直接修改！
    
    // 要这样修改
    emits('update:sideCollapse', !props.sideCollapse)
}