明天小编在网上晃荡的时候，发现前端这几年的倒退离不开组件的概念，之前小编接触到的组件，根本都是这样的
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")大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈