Vue3.0组件通信
父给子传值 props
我们通过在父组件引用子组件的时候,可以通过自定义属性进行值的传递,在子组件通过 props
进行接受。
//parent.vue
<template>
<div class="search">
<span>这是父组件的值:{
{test}}</span>
<Child :toChild="test"/> // 通过自定义属性 toChild
</div>
</template>
<script>
import Child from './child.vue'
export default {
name: "parent",
setup(){
const test = ref("传给子组件")
return {
test
}
},
components:{
Child
},
}
</script>
//child.vue
<template>
<div class="child">
子组件接收的值:{
{toChild}}
</div>
</template>
<script>
export default {
name:"child",
props:["toChild"], //通过props接收自定义属性 toChild
}
</script>