vue视频教程系列第十四节-组件基础知识(1)

vue视频教程系列第十四节-组件基础知识(1)_腾讯视频

这节课主要讲组件的基础知识。

组件是什么呢？组件是可复用的vue实例。我们在项目开发的过程中，会经常遇到这样的情况--会多次使用一些功能相似的模块。如果我们每次使用时都要重新开发的话，是相当低效率的，尤其在开发大型项目时。通常的解决方法是，将多次使用并且功能相似的模块擢出来，封装成一个个组件。

我们知道vue实例是一个根组件，根组件里会嵌套header啊，footer啊，detail啊等其它组件，这些组件里又可以嵌套其它组件...这样就会形成一个组件树。可以看下下面的图：

在这个组件树里，必然会有层级关系。对于首页组件来说呢，其是header组件是的父组件; header组件是首页组件的子组件。我们为什么引出父子组件呢，因为组件的最大特性是“复用”，如果要达到“复用”的目的，需要兼容各种状况，必然会涉及到传值的问题，这就会涉及到父组件传数据给子组件，子组件发送行为请求的问题。父子组件传值我们将在下节课讲，这节课主要带领大家认识一下组件，创建一个简单的组件，并使用它。

首先我们在components文件夹里创建一名叫Header.vue的组件。在这里要插一嘴组件的命名规则--采用驼峰式命名规则，首字母大写，这也是我的编码习惯，当然这样的编码方式，会一眼看出哪些是组件。这个组件很简单，只在dom元素里添加一句话，其它不用管：

<div class="header">

   这是header

  </div>

         返回App.vue，我们将在这个父组件里使用Header这个子组件。如何使用，需要三个步骤：

         1. 建立联系。将Header.vue引入进来

             import Header from './components/Header.vue'

         2.注册组件。即彩怎样的标签名

 components: {

      'v-header': Header

    },

          3.展示在Dom元素里

             <v-header></v-header>

完整的代码如下：

html部分；

<div id="root">

     <v-header></v-header>

  </div>

js部分：

export default {

    components: {

      'v-header': Header

    },

    data() {

      return {        

      }

    }

  }

这就是一个简单组件从创建到使用的全过程。下节课我们继续挑战组件的传值！

欢迎关注微号：duzhan99