父组件传给子组件
/父组件
<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>