父组件
组件传参时使用v-model
修饰
<template>
<info-card v-model:info='info' v-model:info='type'></info-card>
</template>
</template>
<script>
import {ref, unref, getCurrentInstance, watch, reactive, onMounted} from "vue";
import {useRouter} from "vue-router";
import infoCard from "@/views/infoCard";
export default {
name: "index",
props: [],
emits: [],
components: {
infoCard,
},
setup(props, content) {
const router = useRouter()
let data = {
info : reactive({}),
type: ref(""),
}
//监听
watch(() => [props.menuList], ([newMenuList], [oldMenuList]) => {
})
onMounted(async () => {
})
let methods = {}
return {
router,
...data,
...methods
}
}
}
</script>
<style lang="scss" scoped>
</style>
子组件
使用emits
声明参数,值改变时使用content.emit('update:参数',值)
修改父组件值
<template>
</template>
</template>
<script>
import {ref, unref, getCurrentInstance, watch, reactive, onMounted} from "vue";
import {useRouter} from "vue-router";
export default {
name: "infoCard",
props: ["info","type"],
emits: ["update:info","update:type"],
components: {},
setup(props, content) {
const router = useRouter()
let data = {
}
//监听
watch(() => [props.info], ([newInfo], [oldInfo) => {
})
onMounted(async () => {
//操作值
//将值发送给父组件
content.emit('update:info',"")
//扩展 发送方法
content.emit('success',"")
})
let methods = {}
return {
router,
...data,
...methods
}
}
}
</script>
<style lang="scss" scoped>
</style>