Vue3的动态组件和异步组价

今天小编在网上闲逛的时候，发现前端这几年的发展离不开组件的概念，之前小编接触到的组件，基本都是这样的

const app= Vue.createApp({template: `<input-item /><common-item />`
})app.component('input-item',{template: `<div><input /></div>`
})app.component('common-item',{template: `<div>Hello World</div>`
})
const vm = app.mount("#root")

这个时候页面显示的一个文本框，一行文字，这个时候，如果我们想通过一个按钮，来切换两个元素的现实和隐藏关系，就可以把代码修改成这样

const app= Vue.createApp({data(){return {currentItem: 'input-item'}},methods:{handleClick(){if(this.currentItem === 'input-item'){this.currentItem = 'common-item'}else{this.currentItem = 'input-item'}// 也可以通过三目运算符来实现。还可以借鉴绑定class或者style绑定// this.currentItem = this.currentItem === 'input-item'?'common-item':'input-item'}},template: `<input-item v-show="currentItem === 'input-item'" /><common-item v-show="currentItem === 'common-item'" /><button @click="handleClick">切换</button>`
})app.component('input-item',{template: `<div><input /></div>`
})app.component('common-item',{template: `<div>Hello World</div>`
})
const vm = app.mount("#root")

有了动态组件之后，同样的需求，我们的代码就可以写成这样

// 动态组件：根据数据的变化，结合component这个标签，来随时动态切换组件的实现
const app= Vue.createApp({data(){return {currentItem: 'input-item'}},methods:{handleClick(){if(this.currentItem === 'input-item'){this.currentItem = 'common-item'}else{this.currentItem = 'input-item'}}},template: `// 为了缓存文本框之前的数据<keep-alive><component :is="currentItem" /></keep-alive><button @click="handleClick">切换</button>`
})app.component('input-item',{template: `<div><input /></div>`
})app.component('common-item',{template: `<div>Hello World</div>`
})
const vm = app.mount("#root")

在小编的第一块代码中，都是引入自定义标签的组件之后，就可以直接展示效果，这种成为同步组件，当然还有异步组件，主要是为了解决首屏加载速度的问题，借助Vue3中的defineAsyncComponent，就像这样

const AsyncCommonItem = Vue.defineAsyncComponent(() => {return new Promise((resolve,reject) => {setTimeout(() => {resolve({template:'<div>this is an async component</div>'})},4000)})
})
const app= Vue.createApp({template: `<div><common-item /><async-common-item /></div>`
})app.component('common-item',{template: `<div>Hello World</div>`
})app.component('async-common-item',AsyncCommonItem)const vm = app.mount("#root")

当然，今天小编还为大家准备了一些其他常用的知识点，就当是饭后甜点吧

一、ref：获取DOM节点用的语法，慎用这种方法，后期维护的时候会很麻烦

const app= Vue.createApp({data(){return {count: 1}},mounted(){ // 只有早这个生命周期或者之后，将元素挂载上，才存在DOM的概念console.log(this.$refs.countele)  // <div>1</div>this.$refs.commele.sayHello()},template: `<div @click="count += 1"><div ref="countele">{{ count }}</div><common-item ref='commele' /></div>`
})app.component('common-item',{methods:{sayHello(){alert('hello')}},template: `<div>Hello World</div>`
})const vm = app.mount("#root")

二、privide inject：用于组件与子组件的子组件传递数据的方式

我们在通过组件向子组件的子组件传递数据的时候，可以这样

const app= Vue.createApp({data(){return {count: 1}},template: `<div><child :count="count"/></div>`
})app.component('child',{props:['count'],template: `<div><child-child :count="count" /></div>`
})app.component('child-child',{props:['count'],template: `<div>{{ count }}</div>`
})
const vm = app.mount("#root")

显然，这样很麻烦，通过privide inject，我们可以这么写

const app= Vue.createApp({data(){return {count: 1}},// provide:{ // 不能直接调用data中的数据，需要的时候，需要写成函数的方式//     count:1// },// 这种是一次性的，可以通过Vue3的getter方式响应式，通过传统props一层层传递是可以provide(){return {count: this.count}},template: `<div><child /><button @click="count += 1">增加</button></div>`
})app.component('child',{template: `<div><child-child /></div>`
})app.component('child-child',{inject:['count'],template: `<div>{{ count }}</div>`
})
const vm = app.mount("#root")

大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈

Vue3的动态组件和异步组价相关推荐

vue2基础 - vue2 动态组件和异步组件使用
动态组件在动态组件上使用 keep-alive 在线示例当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题. 例如我们来展开说一说这个多标签界面: 你会注意到 ...
Vue3动态组件/异步组件
文章目录一.动态组件 1.markRaw 2.keep-alive 二.异步组件 1.使用官方提供的defineAsyncComponent()函数 2.使用插件vueuse 一.动态组件动态切换 ...
Vue.js 动态组件异步组件
在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabCompon ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
Vue动态组件异步组件 keep-alive
动态组件指的是动态切换组件的显示与隐藏每次进行组件间的切换时,Vue都创建了一个新的组件实例,同时存在销毁过程为了避免过程一每次进行销毁重建的问题,那么可以通过 keep-alive 来处理 &l ...
Vue3动态组件、缓存组件、分发组件
1.动态组件 Vue提供了全局的内置组件,这些组件主要完成的都是功能封装动态组件.缓存组件.分发组件多个组件使用同一个挂载点,然后动态地在他们之间切换,称为动态组件用法:<comp ...
Vue3+ Vue-cli (2) 组件篇
目录一.全局组件定义和复用性讲解二.Vue3中的局部组件三.父子组件的静态和动态传值四.组件传值时的校验操作五.组件中重要机制 - 单项数据流六.Non-props使用技巧七.组件中通过 ...
动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
react实现异步插件_React-loadable实现组件进行异步加载
React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长.所有,可以对组件进行异步加载处理,可以使 ...

Vue3的动态组件和异步组价

Vue3的动态组件和异步组价相关推荐

最新文章

热门文章