vue3.0组件传值

defineProps 父组件向子组件传值，子组件使用defineProps接收

// 父组件 Parent.vue
<template> 
    <Son :name="name" @change="change"/>
</template> 
<script setup> 
import {ref} from 'vue'

const name = ref('')
</script>

// 子组件 Son.vue
<template> 
    <div>{{props.name}}</div>
    <button @click="changeName">改变名字</button>
</template> 
<script setup> 
import { defineProps } from 'vue'

// 子组件通过defineProps接收父组件传递的值
const props = defineProps({
    name:{
        type:string
    }
})

</script>

defineEmits 子组件向父组件传值

// 父组件 Parent.vue
<template> 
    {{name}}
    <Son @modifyName="changeName"/>
</template> 
<script setup> 
import {ref} from 'vue'

const name = ref('咩咩')

fuction changeName (name){
    name.value = name
}
</script>

// 子组件 Son.vue
<template> 
    <button @click="change">改变名字</button>
</template> 
<script setup> 
import { defineEmit} from 'vue'

// 子组件通过defineEmit向父组件传值
const emits = defineEmit(['modifyName'])
function change(){
    emits(modifyName, '咩咩111')
}

</script>

defineExpose 子组件向父组件暴露值

// 父组件 Parent.vue
<template> 
    <Son :ref="sonRef"/>
    <button @click="getExpose">获取暴露的值</button>
</template> 
<script setup> 
import {ref} from 'vue'

const sonRef = ref()

fuction getExpose (){
    console.log(sonRef.value.miemie, '接收Son暴露出的值')
}
</script>

// 子组件 Son.vue
<template> 
    <button @click="changeName">改变名字</button>
</template> 
<script setup> 
import Son from './Son.vue'
import { defineExpose} from 'vue'

const miemie = ref('我是咩咩')

// 子组件通过defineExpose向外暴露值
const emits = defineExpose({miemie})
</script>

provide inject 父组件向子孙传值

// 父组件 Parent.vue
<template> 
    <Son/>
</template> 
<script setup> 
import {ref, provide} from 'vue'
const name = ref('咩咩')
const sonRef = ref()
provide("proName", name)
</script>

// 子组件 Son.vue
<template> 
    <A/>
</template> 
<script setup> 
import Son from './Son.vue'
</script>

// 孙组件 A.vue
<template> 
    {{name}}
</template> 
<script setup> 
import { inject } from 'vue'

// 孙组件通过inject获取祖父组件的值
const name = inject('proName')
</script>