快捷键 vb3s
父组件:
<template>
<div>
<child ref="childRef" :title="title" @onTitle="setTitle" />
<button @click="getChild">获取child实例</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import child from './components/child.vue'
let title = ref('我是一个父组件')
let childRef = ref()
const setTitle = tit => (title.value = tit)
const getChild = () => {
console.log(childRef.value)
}
</script>
<style lang="scss" scoped>
</style>
子组件:
<template>
<div>
<h3>child组件 -- {{ title }}</h3>
<button @click="setTitle">修改父组件标题</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
defineProps({
title: { type: String }
})
const emit = defineEmits(['onTitle'])
const setTitle = () => {
emit('onTitle', Date.now() + '')
}
const name = ref('aaaa')
const fn = () => {}
defineExpose({
name,
fn
})
</script>
<style lang="scss" scoped></style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)