vue3 defineProps defineEmits defineExpose

defineProps

父组件传值给子组件

defineProps()接受对象，对象的格式如下：

{
	type:String ,// 如果可能存在多个类型，则可以写成 [String,Number]
	default:'默认值',
	required: true// 是否必传 ，在不声明为true 的情况下，所有prop 默认为非必填。
}
1
2
3
4
5

子组件child

<template>
 <div>父组件传过来的值： {{ s.title }}div>
 <div v-for="item in s.arr">{{item}}div>
template>

<script setup>
const s=defineProps({
  title: String,
  arr:Array
})
script>

<style lang="scss" scoped>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

父组件parent

<template>
<child :title="title" :arr="arr">Child>
template>

<script setup>
import child from '~/pages/child.vue'
import {ref} from 'vue'
const title=ref("prop父传子")
const arr=ref([1,2,3,4])
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

defineEmits

子组件向父组件事件传递

defineEmits()接受一个数组，数组内容为父组件自定义的触发事件名称，不是方法名称

在 emits()的第一个参数，是监听事件的字面量。第二个参数为事件传递的参数。如果该事件有多个参数，第二个参数建议用对象的形式传递。

子组件child

<template>
  <button @click="clickThis">点我button>
template>

<script setup>
import {ref} from 'vue'
const content=ref("emit事件子传父")
const emit= defineEmits(['someEvent'])
const clickThis = () => {
    emit('someEvent',content.value)
  }
script>

<style lang="scss" scoped>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

父组件parent

<template>
<child @some-event="callback">Child>
<div>子向父传值：{{children_msg}}div>
template>

<script setup>
import child from '~/pages/child.vue'
import {ref} from 'vue'
const children_msg=ref("")
const callback=(s)=>{
     children_msg.value = s
}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

defineExpose

组件暴露自己的属性，可以通过这个来实现父组件调用子组件的方法，获取子组件的值

父组件parent.vue

<template>
<button @click='childShow'>点击调用子组件方法button>
<child ref='showComp'>child>
template>
<script setup>
import { ref } from 'vue'
import child from '~/pages/child.vue'
const showComp=ref(null)//这个时候获取了子组件child
const childShow=()=>{
  showComp.value.show()//调用子组件的show方法
  console.log(showComp.value.count) // 123456
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

子组件child.vue

<template>
<div>我是子组件div>
template>
<script setup>
import { ref } from 'vue'
const count = ref(123456)
const show=()=>{
  alert("我是子组件，我的show方法被调用了")
}
// 主动暴露childMethod方法
defineExpose({ show,count })
script>
1
2
3
4
5
6
7
8
9
10
11
12