vue3+tsx+vite封装组件时,传值无法拿到最新值的坑

vue3+tsx+vite封装组件时,传值无法拿到最新值的坑

例如：A页面引入B组件,B组件无法拿取到A页面传到最新值。

---

提示：以下是本篇文章正文内容，下面案例可供参考

useVModel

1.组件页面引入

代码如下（示例）：

//组件页面  B.tsx
import { useVModel } from "@vueuse/core";	//引入
export default defineComponent({
	setup(props, { emit }) {
	//props值传过来是单向绑定的 只能读取  但 不可以改变、赋值 传出去的为上一次传进来的的值
	//将传过来的方法、值、放入useVmodel里面就成了双向绑定 vue3自带的东东
	//data.value可以改变、赋值  接收或是发出去的值、变量都是实时更新的
	//emit调用父页面的方法
		const data = useVModel(props,"value",emit);	//使用	
	},
});

2.父页面使用组件

代码如下（示例）：

import { defineComponent, watch } from "vue";
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
//引入组件
//不引入的话 标签需要写成<my-wangeditor></my-wangeditor>
import MyWangeditor from "../../common/components/MyWangeditor/index";	

export default defineComponent({
  components: {
    MyWangeditor,
  },
  setup() {
    const content = reactive({
      html: undefined,
      text: undefined
    })
    
    return () => (
      <>
        <div style="margin-top: 10px;">
          <MyWangeditor v-model={[content.html, "value"]} />		//双向绑定 传值
        </div>
        <div class=" w-52 h-28 border">
          {content.html}		//查看数据每次变更是否更新成功
        </div>
      </>
    );
  },
});