Vue3 全局 Api 与 v-model 的使用

阳光穿透心脏的1/2处 2022-12-24 08:57 128阅读 0赞

> 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>
      
      <VmodelTest v-model:counter="counter" />
      
      <VmodelTest :counter="counter" @update:counter="counter = $event" />
    </template>
    
    <script>
    import VmodelTest from "./VmodelTest.vue";
    
    export default { 
      data() { 
        return { 
          counter: 1,
        };
      },
      components: { 
        VmodelTest,
      },
    }
    </script>

<template>
      <div @click="$emit('update:counter', counter + 1)">
        counter: { {  counter }}
      </div>
    </template>
    
    export default { 
      props: { 
        counter: { 
          type: Number,
          default: 0,
        },
      },
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue全局API

Vue全局API * Vue.extend( options ) * Vue.nextTick( \[callback, context\] ) * Vu...

妖狐艹你老母/ 2024年04月17日 05:52/ 0 赞/ 74 阅读

相关 Vue 3 全局注册属性与方法

Vue 3 全局注册属性与方法文章目录 Vue 3 全局注册属性与方法 1、在 main.ts 文件中全局注册 2、在组件中调用

叁歲伎倆/ 2023年09月26日 20:17/ 0 赞/ 146 阅读

相关 Vue之全局API（全局操作set+delete）

全局API （1）什么是全局API？全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API。

灰太狼/ 2023年05月29日 14:27/ 0 赞/ 33 阅读

相关 Vue3 渲染函数 Api 的使用

> Vue3 中渲染函数的用法更简单、直接，插槽统一使用 $slots 获取。 <template> <!-- 渲染函数 Render Api 使用

我就是我/ 2022年12月24日 09:53/ 0 赞/ 127 阅读

相关 Vue3 全局 Api 与 v-model 的使用

> Vue2 中的 Global Api 在 Vue3 中改为应用程序实例调用，如自定义组件 // Vue2 使用 Vue.component 方式 im

阳光穿透心脏的1/2处/ 2022年12月24日 08:57/ 0 赞/ 129 阅读

相关【vue】vue全局api

文章目录 1. 全局api的实现方式 1.1. 实现步骤 1.2. 示例 1. 全局api的实现方式 1.1. 实现步骤首

Bertha 。/ 2022年10月12日 01:17/ 0 赞/ 205 阅读

相关 Vue3全局APi解析-源码学习

> 本文章共5314字，预计阅读时间5-15分钟。前言不知不觉[Vue-next][]的版本已经来到了3.1.2，最近对照着源码学习Vue3的全局Api，边学习边整

太过爱你忘了你带给我的痛/ 2022年10月11日 13:40/ 0 赞/ 171 阅读

相关源码浅析-Vue3中的13个全局Api

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群 > 本文章共5314字，预计阅读时间5-15分钟。前言不知不觉Vue-next\[1\]的版

Love The Way You Lie/ 2022年08月29日 06:21/ 0 赞/ 150 阅读

相关 Vue学习笔记——全局API

第1节：Vue.directive 自定义指令 <div id="app"> <div v-jspang="color" id="demo">

今天药忘吃喽~/ 2022年05月19日 02:36/ 0 赞/ 207 阅读

相关 Vue基础----全局API(二)

Vue.directive 自定义指令一、什么是全局API？全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局A

快来打我*/ 2022年05月14日 04:14/ 0 赞/ 252 阅读