Vue2项目集成到Vue3项目遇到问题汇总

（一）解决vue this.$forceUpdate() 处理页面刷新问题
Vue2中直接

this.$forceUpdate()

Vue3中直接

import { getCurrentInstance } from "vue";
setup(){
//解构赋值 设置别名that  也可不写  :that  直接ctx
  	let {ctx:that} = getCurrentInstance()
	that.$forceUpdate()
}

（二）render函数（render方法的实质就是生成template模板）
Vue2中直接
main.js中是这样定义的

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

在页面中直接使用

export default {
  render(h, ctx) {
  let processTrees=[];
  processTrees.push(
      h("div", { style: { "text-align": "center" } }, [
        h("div", {
          class: { "process-end": true },
          domProps: { innerHTML: "流程结束" },
        }),
      ])
    );

    return h("div", { class: { _root: true }, ref: "_root" }, processTrees);
  },
  }

Vue3中直接
要引用import { h } from "vue";

 export default {
  setup() {
  return () => {
     
      const processTrees = [];
      processTrees.push(
        h("div", { style: { "text-align": "center" } }, [
          h(
            "div",
            {
              class: { "process-end": true },
            },
            "流程结束"
          ),
        ])
      );
      return h("div", { class: { _root: true }, ref: "_root" }, processTrees);
    };

    }}

（三）$refs的使用

有时候想访问$refs绑定的组件的属性或者方法，我们会使用$refs。但是Vue3不同于Vue2，在
Vue3的setup中我们是无法访问到this的，所以我们需要借助一个方法，那就getCurrentInstance，该方法返回了当前的实力对象。但是要注意一下几点。

不要把该函数当作是optionsApi中来获取 this 使用。
该方法只在 setup、生命周期函数中有效，在方法中是无效的

父组件

<template>
    <div>
        <Child ref="child"></Child>
        <button @click="show">Show Child Message</button>
    </div>
</template>


<script>

import { getCurrentInstance } from 'vue';
import Child from './Child.vue';
export default {
  setup() {
    const currentInstance = getCurrentInstance()
    function show() {
        currentInstance.ctx.$refs.child.alertMessage()
   }
   return{
   show
   }
}
}

</script>

子组件写法一

<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

<script setup>
import { ref } from 'vue';
let message = ref('我是子元素')
const alertMessage = function () {
    alert(message.value)
}
defineExpose({
    message,
    alertMessage
})
</script>

子组件写法二

<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

<script>
import { ref } from "@vue/reactivity";


export default {
    setup() {
        const message = ref('我是子元素')

        const alertMessage = () => {
            alert(message.value)
        }

        return {
            message,
            alertMessage
        }
    },

}
</script>

子组件写法一：setup 的语法糖的好处就是定义的数据和方法不用进行 return，也能够在模板中进行使用。通过<script setup>语法糖的写法，其组件是默认关闭的，也就是说如果是通过$refs或者$parents来访问子组件中定义的值是拿不到的，必须通过defineExpose向外暴露你想获取的值才行.

（四）emit的使用

Vue2使用一

子组件：
methods: {
    handleNextMonth() {
      this.$emit("linkTo");
    },
父组件：
 <customerList
     :list="customerList"
     @linkto="linkTo"
  />

Vue2使用二

// Parent.vue 响应
<template>
   <child @ParentClick="ParentClick"></child>
</template>
<script>
   export default {
   methods: {
   ParentClick(){
   console.log('子组件点击了爸爸组件的方法ParentClick')
   }}}
</script>

// child.vue 响应
<template>
  <div>这里是子组件</div>
  <button @click="$emit('ParentClick')">方法一、直接调用</button>
  <button @click="clickparent">方法二、间接调用</button>
</template>
 
<script>
export default {
  methods: {
    clickparent() {
      //调用父组件自定义的ParentClick事件，第二个参数是传值给父组件
      this.$emit("ParentClick", "vue2哈哈成功调用父组件了");
    },
  },
};
</script>

Vue3使用一

子组件：
emits: ["linkto"],
setup(props: any, ctx: any) {
   const data = reactive({
     linkTo: (item: any) => {
       ctx.emit("linkto", item.externalUserid);
  },
 const refsData = toRefs(data);
 return { ...refsData };
 
父组件：
 <customerList
     :list="customerList"
     @linkto="linkTo"
  />

Vue3使用二

// Parent.vue 父组件
<template>
   <child @ParentClick="ParentClick"></child>
</template>
<script setup>
import './child.vue'//vue3直接引入子组件即可使用，不需要注册了
 const  ParentClick=()=>{
   console.log('子组件点击了爸爸组件的方法ParentClick')
   }
</script>

// child.vue 子组件
<template>
  <div>这里是子组件</div>
  <button @click="emit('ParentClick')">方法一、直接调用</button>
  <button @click="clickparent">方法二、间接调用</button>
</template>
 
<script setup>
import { defineEmits} from 'vue'//引入方法
const emit = defineEmits(['clickparent'])//获取父组件的方法emit
const clickparent=()=> {
      //调用父组件自定义的ParentClick事件，第二个参数是传值给父组件
      emit("ParentClick", "vue3哈哈成功调用父组件了");
    },
</script>