vue3 + setup + ts 简单的使用记录

1、setup 定义双向绑定变量，使用 ref 和 reactive , 并 return 回去，就可以在模板使用

import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  name: 'about',
  setup() {
    const msg = ref('This is an about page');
    const obj = reactive({
      a: 1,
      b: 2
    })

    return {
      msg,
      obj
    }
  },
})

2、setup 改动 msg 和 obj， toRefs的使用

import { defineComponent, ref, reactive, toRefs } from 'vue';

export default defineComponent({
  name: 'about',
  setup() {
    const msg = ref('This is an about page');
    const obj = reactive({
      a: 1,
      b: 2
    })

    const msgValue = ()=>{
      msg.value = 'value'; // 使用 ref 定义的 要加 .value 就可以改动
      obj.a = 2;  // reactive 定义的对象不须要
    }

    return {
      msg,
      obj,
      ...toRefs(obj), // toRefs 解构出里面每个值,模板里直接用 {{b}}，
      msgValue
    }
  },
})

3、 setup 使用勾子函数，引入后直接调用，以下是 onMounted 和 nextTick 的使用，其它也是一样的

import { defineComponent, onMounted, nextTick } from "vue";

export default defineComponent({
  setup(props, context) {
    onMounted(() => {
      console.log(context);
    });
    nextTick(() => {
      console.log(context);
    });
  },
});

4、子组件的使用：接收参与调用父组件， defineComponent 格式

//  父组件 使用子组件 testCom ， 传参与传进一个回调
<template>
  <div class="about">
    <h1>{{ obj }}</h1>
    <test-com :msg="msg" @change="msgValue"></test-com>
  </div>
</template>



// 子组件使用

<template>
  <div>
    <h1 @click="testClick">{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    msg: {  // 接收参数
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    console.log(props.msg); // 使用参数
    const testClick = () => {
      context.emit("change"); // 使用回调方法
    };
    return {
      testClick,
    };
  },
});
</script>

4.1、子组件的使用：接收参与调用父组件， <script setup lang="ts"> 格式

<template>
  <div>
    <h1 @click="testClick">{{ msg }}</h1>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, defineEmits } from "vue";

const props = defineProps({
  // defineProps 接收参数
  msg: {
    type: String,
    default: "",
  },
  // ... 多个向后加
});

const emit = defineEmits(["change"]); // 定义 emit 有哪个回调方法，多个向后加 defineEmits(["change","click",...])
const testClick = () => {
  console.log(props.msg); // 使用父级传进来的参数
  emit("change");
};
</script>

5、父组件调用子组件 testCom

<template>
  <div class="about">
    <h1 @click="childClick">点击</h1>
    <test-com ref="testCom" :msg="msg" @change="msgValue"></test-com>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import testCom from "./components/test-com.vue";
export default defineComponent({
  components: {
    "test-com": testCom,
  },
  name: "about",
  setup() {

    const testCom: any = ref<null | HTMLElement>(null); // 获取名字为 testCom 的组件，名字要和 标签上的 ref 名字相同
    const childClick = () => {
      testCom.value.testClick(); //  调用子组件的方法 testClick
    };

    return {
      testCom,   // 一定要return 回去才管用，不然 testCom.value 是找不到这个组件的
      childClick,
    };
  },
});
</script>

6、setup 使用 “router” 、 “vuex” 、“watch”

<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "vuex"; // 引入 vuex 
import { useRouter, useRoute } from "vue-router"; // 引入路由

export default defineComponent({

  setup() {

    const router = useRouter(); //路由跳转等信息 相当于 $router
    const route = useRoute(); // $route

    const store = useStore();
    store.commit("SET_ISLOGIN", false); // 调用 vuex 方法
    const state = store.state; // 使用 state 数据

    watch(route, (newval,old) => { // 监听路由
      console.log(newval);
      console.log(old);
    });

    return {

    };
  },
});
</script>

7、向 vue 中添加全局变量用 app.config.globalProperties.xx, 示例中添加 config 、 common和注册全局组件

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import store from "./store";
import config from "./config/config";
import common from "./common/common";
import mainContent from "./components/main-content/main-content.vue";

const app = createApp(App);
app.config.globalProperties.$config = config;   // 添加全局变量 config
app.config.globalProperties.$common = common;   // 添加全局就是 common
app.use(store).use(ElementPlus).use(router).mount("#app");

app.component("pi-main-content", mainContent); // 注册全局组件

8、 setup 使用全局变量

setup() {
 const internalInstance = getCurrentInstance();
    const globalProperties =
      internalInstance?.appContext.config.globalProperties;
    console.log(globalProperties);
}

好长的一段，可以把它写的一个方法，调用就不用写这么多了

// 起一个文件  useCurrentInstance.ts , 写上以下方法


import { ComponentInternalInstance, getCurrentInstance } from "vue";
export default function useCurrentInstance() {
  const { appContext } = getCurrentInstance() as ComponentInternalInstance;
  const globalProperties = appContext.config.globalProperties;
  return {
    globalProperties,
  };
}






//组件里使用

import useCurrentInstance from "../../hooks/useCurrentInstance"; // 引入
const { globalProperties } = useCurrentInstance();

console.log(globalProperties); // 得到所有的全局变量
console.log(globalProperties.$touter); // 使用路由