vue3.2 父子组件传参

父组件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>