Vue3 全局 Api 与 v-model 的使用

Vue2 中的 Global Api 在 Vue3 中 改为 应用程序实例调用,如自定义组件

// Vue2 使用 Vue.component 方式
import Vue from "vue";
import App from "./App.vue";

Vue.component('App', App);
// Vue3 使用 createApp().component 方式
import { createApp, h } from "vue";
import App from "./App.vue";

createApp(App)
  .component("Comp", { render: () => h("div", "全局自定义组件") });
  • 注:同时移除了 Vue.config.productionTip 和 Vue.filter

同时部分 Api 改为了可摇数优化,打包时使用 webpack 的 tree-shaking 排除多余的 dead code (无效代码)。

// Vue2
import Vue from "vue";

Vue.nextTick(() => {});
// Vue3
import { nextTick } from "vue";

nextTick(() => {});

在 Vue3 中 移除了 .sync 修饰符,v-model 实现组件双向数据绑定 的用法如下:

<template>
  <!-- v-model 的使用 -->
  <VmodelTest v-model:counter="counter" />
  <!-- 与 v-model 等效 -->
  <VmodelTest :counter="counter" @update:counter="counter = $event" />
</template>

<script>
import VmodelTest from "./VmodelTest.vue";

export default {
  data() {
    return {
      counter: 1,
    };
  },
  components: {
    VmodelTest,
  },
}
</script>
<!-- VmodelTest 组件 -->
<template>
  <div @click="$emit('update:counter', counter + 1)">
    counter: {{ counter }}
  </div>
</template>

export default {
  props: {
    counter: {
      type: Number,
      default: 0,
    },
  },
};
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值