您的位置:首页 > 房产 > 建筑 > html在线制作_网站推广的策略有哪些_360安全网址_深圳百度快照优化

html在线制作_网站推广的策略有哪些_360安全网址_深圳百度快照优化

2024/12/26 20:16:54 来源:https://blog.csdn.net/u011027547/article/details/136831696  浏览:    关键词:html在线制作_网站推广的策略有哪些_360安全网址_深圳百度快照优化
html在线制作_网站推广的策略有哪些_360安全网址_深圳百度快照优化

目录

  • 组件注册
  • 局部注册
  • 全局注册
    • 全局注册示例
    • 总结


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

组件注册

组件注册有两种方式:全局注册和局部注册。全局注册只需要注册依次,其他组件可以直接调用无需再次像局部注册一样再次注册,

全局注册虽然很方便,但有以下几个问题:

全局注册,但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中。

全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性。

相比之下,局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确,并且对 tree-shaking 更加友好。

局部注册

就是我们之前使用过的注册方式.局部注册的组件在后代组件中不可用。在这个例子中,ComponentA 注册后仅在当前组件可用,而在任何的子组件或更深层的子组件中都不可用。但是因为全局注册的缺点,我一般还是喜欢用局部

  • 在使用 <script setup> 的单文件组件中,导入的组件可以直接在模板中使用,无需注册:
<script setup>
import ComponentA from './ComponentA.vue'
</script><template><ComponentA />
</template>
  • 没有使用 <script setup>,则需要使用 components 选项来显式注册:
import ComponentA from './ComponentA.js'export default {components: {ComponentA},setup() {// ...}
}

全局注册

在main.js中

import { createApp } from 'vue'const app = createApp({})app.component(// 注册组件的别名  后面这个名字来调用组件'MyComponent',// 组件的实现,前面导入的组件{/* ... */}
)
createApp(App).mount("#app"); //挂载

全局注册示例

上节课的基础上小例子
main.js中添加全局注册

// import './assets/main.css'import { createApp } from "vue";
import Header from "./page/Header.vue";
import App from "./App.vue";//全局注册区域开始
const app = createApp(App);
app.component("GlobalHeader", Header);
//全局注册区域结束
app.mount("#app"); //挂载

app.vue中注释掉局部引用相关的内容

<template><GlobalHeader /><Main /><Aside />
</template><script>
// import Header from "./page/Header.vue";
import Main from "./page/Main.vue";
import Aside from "./page/Aside.vue";export default {components: {// Header,Main,Aside,},
};
</script><style scoped></style>

header正常显示
在这里插入图片描述


总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com