组件化是统计开发标准的有效方式，同时也是快速开发的有效方式，提高了前端布局的重复利用率，大大缩减的代码量，提高了前端开发的工作效率！那么如何vue是如何创建组件和引用组件及如何进行传参的呢？下面就一点点的带你走进VUE组件化的教程。
vue组件化：自定义组件创建并引入和传参-QUI-Notes

本教程推荐单文件组件方式：一个组件一个vue文件。

1.首先在文件夹components中创建组件header.vue 

<template>
  <div class="header"> 
     <div class="titleText">{{ msg }}</div> 
  </div>
</template>

<script>
export default {
  name: 'headerPage',
  props: { //向外暴露参数
    title: String
  },
  data () {
    return {
      msg:  '你好，陈小知！'
    }
  },
  mounted () {
    this.msgChange()
  },
  methods: {
    msgChange () { //动态修改参数
      this.msg = this.title
    }
  }
}
</script>

2.新页面引用组件，一定要“路径+文件.后缀”，我在这步吭呲好久！

import uiHeader from '../components/header.vue'

3.指定引用组件，相当于声明一下，我这个页面用了什么组件！

components: {
    uiHeader
}

当然这个地方允许自定义组件名称的：

components: {
  'ui-header'  :  uiHeader
}


4.调用组件

<uiHeader title="0"></uiHeader>

这样的的话对应的调用就要改成 

<ui-header title="动态参数测试"></ui-header>

5.Vue动态传参需要用到props向外暴露参数，并规定参数类型，调用的时候直接绑定参数就行

<uiHeader title="我是陈小知"></uiHeader>
<uiHeader :title="headerTxt"></uiHeader>

这样就简单开发了一个小组件了，并实现了动态传参的效果！你学废了吗？拒绝无效代码，从写博客做起！—— 我是陈小知