父组件father.vue 子组件child.vue
1.父传子，把子组件引入到父组件里，定义数据，然后在子组件里使用props接收数据
father.vue
<template>
<div>父组件：{{ money }}</div>
<Child :money="money"/>
<button @click="fatherBtn">父组件</button>
</template>
<script lang='ts' setup>
import Child from './child.vue'
import { ref } from 'vue'
//初始化money数据为5
const money = ref(5)
//这个没啥影响，只是我测试父组件改变数据，子组件是否改变
const fatherBtn = () => {
//把money的数据改为11，父子组件数据都会变
money.value = 11
}
</script>
然后子组件接收
child.vue
<template>
<div>子组件接收的值： {{ props.money }}</div>
</template>
<script lang='ts' setup>
import { } from 'vue'
const props = defineProps({
money: Number
})
</script>
2.子传父，点击按钮，使用defineEmits(vue3)发送给父组件数据，然后父子间的数据就会改变
father.vue代码
<template>
<div>父组件：{{ money }}</div>
<Child :money="money" @func="change"/>
<button @click="fatherBtn">父组件</button>
</template>
<script lang='ts' setup>
import Child from './child.vue'
import { ref } from 'vue'
//初始化money数据为5
const money = ref(5)
//这个没啥影响，只是我测试父组件改变数据，子组件是否改变
const fatherBtn = () => {
//把money的数据改为11，父子组件数据都会变
money.value = 11
}
//接收子组件传过来的值val
const change = (val:any) => {
console.log(val)
money.value = val
}
</script>
child.vue代码
<template>
<div>子组件接收的值： {{ props.money }}</div>
<button @click="childBtn">子组件</button>
</template>
<script lang='ts' setup>
import { } from 'vue'
const props = defineProps({
money: Number
})
const emits = defineEmits(['func'])
//定义一个button，点击向父组件传递数据
const childBtn = () => {
emits('func', 99)
}
</script>
3.父组件调用子组件的方法
父组件：
<template>
<div>父组件：{{ money }}</div>
<Child :money="money" ref="child"/>
<button @click="fatherBtn">父组件</button>
</template>
<script lang='ts' setup>
import Child from './child.vue'
import { ref } from 'vue'
const child = ref(null)
//初始化money数据为5
const money = ref(5)
//这个没啥影响，只是我测试父组件改变数据，子组件是否改变
const fatherBtn = () => {
//把money的数据改为11，父子组件数据都会变
money.value = 11
child.value.play()
}
</script>
子组件：
<template>
<div>子组件接收的值： {{ props.money }}</div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
const title = ref('')
const props = defineProps({
money: Number
})
//定义一个方法
const play = () => {
title.value = "你调用了子组件的方法";
};
//defineExpose暴露对象和方法
defineExpose({
play
})
</script>
4.provide，inject
provide在father.vue组件中注入数据，下面的子组件，孙组件，及引入的组件都可以使用inject来获取到主组件传过来的数据
father.vue
<template>
<div>
<div>father组件：{{ dataValue }}</div>
<button @click="fatherClick">fatherBtn</button>
<Child :dataValue="dataValue" />
</div>
</template>
<script lang='ts' setup>
import { ref, provide } from 'vue'
import Child from './child.vue'
const dataValue = ref('我是原始数据')
//注入数据，第一个是起的名字，第二个是传入的值
provide('oldValue', dataValue)
//点击按钮改变数据，child和sun组件数据也跟着改变
const fatherClick = () => {
dataValue.value = '我是改变后的数据'
}
</script>
child.vue
<template>
<div>
<div>child组件： {{ childValue }}</div>
<Sun />
</div>
</template>
<script lang='ts' setup>
import { inject } from 'vue'
import Sun from './sun.vue'
//通过inject获取数据，并赋值给childValue
const childValue = inject('oldValue')
</script>
sun.vue
<template>
<div>sun组件：{{ sunValue }}</div>
</template>
<script lang='ts' setup>
import { inject } from 'vue'
//通过inject获取数据，并赋值给sunValue
const sunValue = inject('oldValue')
</script>
