哇，已经暂别俩月了😏，这段时间除去过年玩耍🤣，剩下还实习了一会，顺带帮自己进修了一下万众瞩目Vue3👍！在此，接下来几天，小超会不断更新关于Vue3的一些记录，😏更会努力实现一个轮子，开干咯！

Vue2与Vue3区别：

• 首先他俩身为兄弟，自然百分之90都是一样的（😒：废话）；
• 那么不同就在于：Vue3的Template支持多个根标签，它的小老弟可就不行了😏；
• 再者，Vue3有createApp(),而Vue2是new Vue();
• createApp(组件)，new Vue({template,render}) 当然啦，这只是一些基础区别，其内在才是大有不同，慢慢来咯😁

当然，响当当的 vue-router 也是有对应Vue3相匹配的

--->在此，使用Vue3+Ts+vue-router时候，本想靠着Ts强大的纠错功能帮我学习，没想到第一个问题就让我好看🤣

import { createWebHashHistory, createRouter } from 'vue-router'
import Haocc from './components/Haocc.vue'

const history = createWebHashHistory()
const router = createRouter({
  history: history,
  routes: [
    { path: '/', component: Haocc }
  ]
})

createApp(App).mount('#app')

哇哦，这时候，我可没想到解决办法，上来就搞心态，难搞啊😑

可惜哦，大神还是很多的，按照大大的方法，是说使用 ComponentOptions，但我还看到了一个大哥的操作，不免试了试：

// shims.d.ts
declare module '*.vue' {
  import { Component } from "vue";
  const component: Component
  export default component
}

嘿~，不得不说，牛的！（地址在GitHub：ts support）

这个本质就是告诉Ts如何去理解一个漂亮的 .vue 文件😏，当然，大大的方法也完全ok。

接下来，看一下传值

上代码：

<template>
  <div>
    <Switch :value="ccc" @update:value="ccc = $event" />
  </div>
</template>
<script lang="ts">
import Switch from "../lib/Switch.vue";
import { ref } from "vue";
export default {
  components: { Switch },
  setup() {
    const ccc = ref(false);
    return { ccc };
  },
};
</script>

<template>
  <button @click="toggle" :class="{ checked: value }"><span></span></button>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
  props: {
    value: Boolean,
  },
  setup(props, context) {
    const toggle = () => {
      context.emit("update:value", !props.value);
      // this.$emit()
    };
    return { toggle };
  },
};
</script>

两个组件直接的一些值的操作

可以看出，当定义一个变量ccc后，和之前一样，可以直接给子组件使用，但是，在子组件想要进行改变的时候，需要借助一个新的，context.emit(事件名，事件参数),当然，父组件可以使用@事件名="ccc=$event"来接受这个新的改变。

最重要的是，新的v-model

// 1
<Switch :value="ccc" @update:value="ccc = $event" />
// 2
<Switch v-model:value="ccc" />

好了，你自己看吧，简单的不行！！！ 使用要求：

• 属性名为：ccc，事件就得update:ccc 也算是一个比较大的改动了，那暂时先到这里，之后会随着个人的ui轮子库更新来慢慢接触Vue3，最近会更新的啦！