VUE3父组件向子组件传参，参数随子组件值修改

父组件

组件传参时使用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>