网站 案例展示,界面十分好看的网站,呼市网站建设公司,wordpress主题 双语1. 新组件
1) Fragment(片断)
在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用
templateh2aaaa/h2h2aaaa/h2
/template2) T…1. 新组件
1) Fragment(片断)
在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用
templateh2aaaa/h2h2aaaa/h2
/template2) Teleport(瞬移)
Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示
ModalButton.vue
templatebutton clickmodalOpen trueOpen full screen modal! (With teleport!)/buttonteleport tobodydiv v-ifmodalOpen classmodaldivIm a teleported modal! (My parent is body)button clickmodalOpen falseClose/button/div/div/teleport
/templatescript
import { ref } from vue
export default {name: modal-button,setup () {const modalOpen ref(false)return {modalOpen}}
}
/scriptstyle
.modal {position: absolute;top: 0; right: 0; bottom: 0; left: 0;background-color: rgba(0,0,0,.5);display: flex;flex-direction: column;align-items: center;justify-content: center;
}.modal div {display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: white;width: 300px;height: 300px;padding: 5px;
}
/styleApp.vue
templateh2App/h2modal-button/modal-button
/templatescript langts
import ModalButton from ./ModalButton.vueexport default {setup() {return {}},components: {ModalButton}
}
/script3) Suspense(不确定的)
它们允许我们的应用程序在等待异步组件时渲染一些后备内容可以让我们创建一个平滑的用户体验
templateSuspensetemplate v-slot:defaultAsyncComp/!-- AsyncAddress/ --/templatetemplate v-slot:fallbackh1LOADING.../h1/template/Suspense
/templatescript langts
/*
异步组件 Suspense组件
*/
// import AsyncComp from ./AsyncComp.vue
import AsyncAddress from ./AsyncAddress.vue
import { defineAsyncComponent } from vue
const AsyncComp defineAsyncComponent(() import(./AsyncComp.vue))
export default {setup() {return {}},components: {AsyncComp,AsyncAddress}
}
/scriptAsyncComp.vue
templateh2AsyncComp22/h2p{{msg}}/p
/templatescript langtsexport default {name: AsyncComp,setup () {// return new Promise((resolve, reject) {// setTimeout(() {// resolve({// msg: abc// })// }, 2000)// })return {msg: abc}}
}
/scriptAsyncAddress.vue
template
h2{{data}}/h2
/templatescript langts
import axios from axios
export default {async setup() {const result await axios.get(/data/address.json)return {data: result.data}}
}
/script
