美文网首页
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