vue3.0 CLI - 2.6 - 组件的复用入门教程
我的github地址-vue3.0Study-阶段学习成果都会建立分支。
==========================
定义一个基础组件
这个基础组件,是导航条中可以复用的基础组件单个导航。
基础组件【导航组件】基础的功能是能够显示文字,单击的交互方式。明确任务目标之后,进行开发。
在component目录下新建Base目录,Base下新建文件TopNav.vue。加入如下代码:
{{title}}
在About.vue中加入以下红色部分的代码:
通过以上两步,就在About.vue中引入新组件TopNav。其实HelloWorld也是可以复用的。
所谓的复用是啥意思呢?如下:
这既是所谓的复用啦。title是TopNav.vue的props属性中的内容。以上看出,props是一个数组,里边每个元素,是一个将要从父组件中传递过来的【变量】,对,变量,就是这么理解。
上篇文章提到过全局注册和局部注册;这个例子,是【局部注册组件】。在把它变为【全局注册组件】之前,先gitpush一下。
好的,在变【全局】之前,有个问题:全局和局部有什么区别?
上面的例子看见了,要用HelloWorld或TopNav,必须先import。而全局的,不用import。
把组件变为全局组件
任何模块(这时候把组件理解为模块)不可能不用import就可以用,全局注册组件,只是在main.js中进行import,然后通过Vue.component(params)这个函数进行全局注册。
所以全局注册组件也并不神秘,在main.js加入如下代码:
importTopNavfrom'@components/Base/TopNav' Vue.component('TopNav',TopNav)
注意:Vue.component('TopNav',TopNav)必须在 newVue({router,store,render:h=>h(App)}).$mount('#app')也就是根组件实例化之前定义。
然后去掉About.vue中TopNav.vue的引入: