生活中的Design.

使用@vue/composition-api

字数统计: 116阅读时长: 1 min
2022/06/20 Share

使用@vue/composition-api

1.安装与引入

安装

1
npm i  @vue/composition-api

引入

1
2
3
import Vue from "vue";
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);

配置

setup标签支持,$ref等语法的支持

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;

module.exports = {
//...
configureWebpack: {
plugins: [
//setup标签支持
ScriptSetup({
//添加对$ref等语法的支持
reactivityTransform: true,
}),
],
},
};

使用

  • 定义props
    1
    2
    3
    4
    5
    defineProps({
    xxxx: {
    type: String
    }
    })
  • 定义发送的事件
1
defineEmits(["update:xxx"])
CATALOG
  1. 1. 使用@vue/composition-api
    1. 1.1. 1.安装与引入
    2. 1.2. 配置
    3. 1.3. 使用