vue3.0 CLI - 2.6 - 组件的复用入门教程

我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。

==========================

定义一个基础组件

这个基础组件，是导航条中 可以复用 的基础组件 单个导航。

基础组件【导航组件】基础的功能是能够显示文字，单击的交互方式。明确任务目标之后，进行开发。

在 component 目录下新建 Base 目录，Base 下新建文件 TopNav.vue。加入如下代码：

<template> <div class="topnav">  {{title}} </div></template><script>export default { name: 'topnav', props: ['title'], data: function () { return {  text: '导航条' } }}</script>

在 About.vue 中加入以下红色部分的代码：

<template> <div class="about"> <top-nav title="推荐"/> <HelloWorld msg="vue 官方相关资料的链接"/> </div></template><script>// @ is an alias to /srcimport HelloWorld from '@/components/HelloWorld.vue'import TopNav from '@/components/Base/TopNav.vue'export default { name: 'home', components: { HelloWorld, TopNav }}</script>

通过以上两步，就在 About.vue 中引入新组件 TopNav。其实 HelloWorld 也是可以复用的。

所谓的复用是啥意思呢？如下：

<top-nav title="推荐"/>
<top-nav title="军事"/>
<top-nav title="社会"/>
<top-nav title="科技"/>

这既是所谓的复用啦。 title 是 TopNav.vue 的 props 属性中的内容。以上看出，props 是一个数组，里边每个元素，是一个将要从父组件中传递过来的【变量】，对，变量，就是这么理解。

上篇文章提到过 全局注册 和 局部注册；这个例子，是 【局部注册组件】。在把它变为【全局注册组件】之前，先 git push 一下。

好的，在变【全局】之前，有个问题：全局 和 局部 有什么区别？

上面的例子看见了，要用 HelloWorld 或 TopNav，必须先 import。而全局的，不用 import。

把组件变为全局组件

任何模块 ( 这时候把组件理解为模块 ) 不可能不用 import 就可以用，全局注册组件，只是在 main.js 中进行 import，然后通过 Vue.component( params ) 这个函数进行全局注册。

所以全局注册组件也并不神秘，在 main.js 加入如下代码：

import TopNav from '@components/Base/TopNav'Vue.component('TopNav', TopNav)

注意：Vue.component('TopNav', TopNav) 必须在  new Vue({ router, store, render: h => h(App) }).$mount('#app') 也就是根组件实例化之前定义。

然后去掉 About.vue 中 TopNav.vue 的引入：

<template><div class="about"> <top-nav title="推荐"/> <top-nav title="军事"/> <top-nav title="社会"/> <top-nav title="科技"/> <HelloWorld msg="vue 官方相关资料的链接"/></div></template><script>// @ is an alias to /srcimport HelloWorld from '@/components/HelloWorld.vue'// import TopNav from '@/components/Base/TopNav.vue'export default { name: 'home', components: { HelloWorld }}</script>