Create a new subcomponent Child.vue
1. Pass value from parent component to child component
When the parent component passes values to the child component, the child component receives it through props, and then passes the props to the setup syntactic sugar in the form of variables
1. Parent component delivery method
<template>
<div class="hello">
我是父组件
<!-- 父组件通过:变量(这里是info)绑定值 -->
<Child :info="parentMsg"></Child>
</div>
</template>
<script setup>
import Child from './Child'
import {ref} from 'vue'
const parentMsg=ref('父组件传递值是a')
</script>
<style scoped>
.hello{
color:red;
}
</style>2. Receiving method and use of subcomponents
<template>
<!-- info是父组件传递过来的值 -->
<div>我是子组件拿到了父组件的值是{
{info}}</div>
</template>
<script setup>
import { toRefs, defineProps } from 'vue'
const props = defineProps({
//子组件接收父组件传递过来的值
info: String,
})
//使用父组件传递过来的值
const {info} =toRefs(props)
</script>
<style>
</style>Second, the child component passes the value to the parent component
The syntax sugar of vue3's setup is defineEmits
1. The delivery method of subcomponents
<template>
<button @click="clickChild">点击子组件</button>
</template>
<script setup>
import { defineEmits } from 'vue'
// 使用defineEmits创建名称，接受一个数组
const emit = defineEmits(['clickChild'])
const clickChild=()=>{
let param={
content:'b'
}
//传递给父组件
emit('clickChild',param)
}
</script>
<style>
</style>2. Reception and use of the parent component
<template>
<div class="hello">
我是父组件
<!-- clickChild是子组件绑定的事件，click是父组件接受方式 -->
<Child @clickChild="clickEven"></Child>
<p>子组件传递的值是 {
{result}}</p>
</div>
</template>
<script setup>
import Child from './Child'
import {ref} from 'vue'
const result=ref('')
const clickEven=(val)=>{
console.log(val);
result.value=val.content
}
</script>
<style scoped>
</style>3. The parent component gets the attribute value in the child component
When using syntactic sugar, you need to export the properties and methods of the component through defineExpose, so that the parent component can access the data, otherwise the data of the child component cannot be obtained
1. The delivery method of subcomponents
<template>
<div>
<h2> 我是子组件</h2>
<p>性别:{
{ sex}}</p>
</div>
</template>
<script setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
like:'王者荣耀',
age:18
})
defineExpose({sex, info})
</script>
<style>
</style>2. Parent component display mode
<template>
<div class="hello">
我是父组件
<Child ref="testcomRef"></Child>
<button @click="getSonHander">获取子组件中的数据</button>
</div>
</template>
<script setup>
import Child from './Child'
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander=()=>{
console.log('获取子组件中的性别', testcomRef.value.sex );
console.log('获取子组件中的其他信息', testcomRef.value.info )
}
</script>
<style scoped>
</style>