vue2使用vue3语法

Composition API

Composition API 将是 Vue 3 的核心功能，它具有许多更改和性能改进。

我们也可以在 Vue 2 中通过 npm 插件@vue/composition-api 使用它。

安装 yarn add @vue/composition-api 之后，在入口文件 main.js 中使用它。

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

之后，你就可以在你vue2项目中用vue3的组合式API来编写组件了！

<template>
  <button @click="increase">count is: {{ count }}</button>
</template>
<script>
  export default {
    setup() {
      let count = 0
      const increase = () => count++
      return { count, increase }
    },
  }
</script>

script setup

<script setup>语法糖可以使得组合式API编写更为简洁。

这里我们通过unplugin-vue2-script-setup 让vue2在使用@vue/composition-api的基础上也能使用上此特性！

安装 yarn install --dev unplugin-vue2-script-setup，之后在vue.config.js中进行配置

const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

module.exports = {
  parallel: false, // disable thread-loader, which is not compactible with this plugin
  configureWebpack: {
    plugins: [
      ScriptSetup({ /* options */ }),
    ],
  },
}

可否在script上直接设置name=“xxxx”吗？

<script setup>语法可以表达大多数现有 Options API 选项的等效功能，但以下几个选项除外：name、inheritAttrs、自定配置项目，但是您可以这么做

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

<script setup>
  // script setup logic
</script>

路由和vuex等

Vue2 Helpers 能让你在vue2中也能使用到更先进的api，比如 useRouter

import { useRouter } from 'vue2-helpers/vue-router';

const router = useRouter();
router.push('/login');

访问全局属性

通常情况下，我们是通过 this.$xx访问，如 this.$store 或者 ui框架挂全局的方法 this.$confirm( )。

但是组合式API显然没有this，可因为是vue2 全局内容有不得不以this访问，可以这样

<script setup>
import Vue from "vue";

const _this = Vue.prototype;
_this
    .$confirm("确认关闭？")
    .then((_) => {})
    .catch((_) => {});
};

// 或者
// import { getCurrentInstance } from "@vue/composition-api";
// const _this = getCurrentInstance();
// console.log(_this);
</script>

父子通信

父组件访问子组件属性

<template>
  <div class="app">
     <helloword ref="helloword" />
     <el-button type="primary" @click="test()">测试</el-button>
  </div>
</template>
<script setup>
import { ref } from "@vue/composition-api";
import helloword from "./helloword.vue";

const helloword = ref(null);
const test = () => {
  helloword.value.submit();
};
</script>

<template>
  <div class="helloword">
     子组件
  </div>
</template>
<script setup>
import { defineExpose } from "@vue/composition-api";

const submit = () => {
  alert(123);
}
defineExpose({
  submit,
});
</script>