defineProps和defineEmits

defineProps

当在不同场景下，父组件控制子组件展示不同的样式，或者传递不同的数据，这个时候就需要使用到props，子组件通过props来接收父组件传递过来的数据。

场景复现：不同的页面中导航栏展示不同的颜色，这个时候就需要对导航栏组件使用props声明，如此父组件就可以完成对子组件的不同场景的不同定义。

props 声明的格式

1. 简单声明单个值

// 当前组件声明一个name的属性
const props = defineProps(["name"])

// 父组件中使用
<DemoChild :name="fuName"></DemoChild>
const fuName = ref("zhangsan")

1. 约定数据类型

const props = defineProps({
   
  name:String
})

// 父组件中使用方式和上面一致，

1. 约定默认值

const props = defineProps({
   
  name:{
   
    type:String,
    default: 'lisi'
  }
})

1. 声明多个Props

const props = defineProps({
   
  name:{
   
    type:String,
    default:'lisi'
  },
  address:{
   
    type:String,
    default:'xxx'
  }
  // ...
})

1. 声明一个对象格式的Props

const props = defineProps({
   
  user:{
   
    type:Object,
    default:()=>({
   name:'lisi',address:'xxx'})
  }
})

defineEmits

defineEmits 是一个用于定义组件可以触发哪些自定义事件的函数。通过使用defineEmits可以完成子组件对父组件的传值。（上面的defineProps为父组件向子组件进行传值）

• 子组件通过defineEmits来自定义事件，并通过emit('事件名','参数')的方式将值传递给父组件
• 父组件通过 在子组件@自定义事件='处理函数'来获取子组件传递的值。

父组件

<template>
  <!-- 父组件自定义add事件 -->
  <xxx-child @add="handleAdd"></xxx-child>
</template>
<Script setup>
  import {ref} from 'vue'
  function handleAdd(e){
    consloe.log(e)
  }
</Script>

子组件

<template>
  <button @click="handleClick">子组件向父组件传值</button>
</template>
<Script setup>
  import {ref} from 'vue'
  // 子组件声明
  const emit = defineEmits(['add'])
  function handleClick(){
    emit('add',20)
  }
</Script>