美文网首页
Vue3.0----移除Api一览

Vue3.0----移除Api一览

作者: 有一种感动叫做丶只有你懂 | 来源:发表于2021-03-23 11:58 被阅读0次

keyCode,作为v-on修饰符被移除

vue2中可以使用keyCode指代某个按键,vue3不在支持

//keyCode方式不再被支持
<input v-on:keyup.13="submit"></input>

//只能使用alias方式
<input v-on:keyup.enter="submit"></input>

$on$off and $once移除

上述三个方法被认为不应该由vue来提供,因此被移除了,可以使用其他第三方库来实现

//官方推荐mitt这个库,也可以自己写
npm install mitt -S

emiter.vue组件

<template>
  <div>
    <h1>$on,$once,$off被移除</h1>
    子组件Oner接收到的值: <oner></oner>
    <br />
    <button @click="handleEmit">emit some</button>
  </div>
</template>
<script lang='ts'>
import Emmiter from "mitt";
import { defineComponent } from "vue";
import Oner from "./Oner.vue";
export const emiter = Emmiter();

export default defineComponent({
  components: {
    Oner,
  },
  data() {
    return {};
  },
  methods: {
    handleEmit() {
      emiter.emit("some", "张三");
    },
  },
});
</script>
<style scoped>
</style>

oner.vue组件

<template>
  {{ value }}
</template>
<script lang='ts'>
import { defineComponent } from "vue";
import { emiter } from "./Emiter.vue";
export default defineComponent({
  data() {
    return {
      value: null,
    };
  },
  mounted() {
    emiter.on("some", (payload) => {
      this.value = payload;
    });
  },
});
</script>
<style scoped>
</style>

相关文章

网友评论

      本文标题:Vue3.0----移除Api一览

      本文链接:https://www.haomeiwen.com/subject/qemzcltx.html