vue父子传递

44 阅读1分钟

父组件传给子组件

/父组件
<script setup>
import { ref } from 'vue'
import { child } from '/子组件地址'
let parentData = ref('这是父组件的数据');
</script>
<template>
<child :pass='parentData'></child>
</template>
/子组件
<script setup>
import { ref } from 'vue'
import { defineProps } from 'vue'
let props = defineProps({
    pass:String
    })
</script>
<template>
<div>
    {{ props.pass }}
</div>
</template>

子传父

/子组件
<template>
<button @click='send'>发信息给父级</button>
</template>
<script setup>
import { ref } from 'vue'
import { defineEmits } from 'vue'
let emit = defineEmits({'child'})
let send = () => {
    emit('child','子组件数据')
    }
</script>
/父组件
<template>
<child @child='hand'></child>
</template>
<script setup>
import { ref } from 'vue'
import { child } from '子组件地址'
let hand = (value) => {
    console.log('子组件触发事件',value)
}
</script>