公共组件

引入公共路由的方式：
1、在全局注册，然后引入

在入口文件main.js先导入公共路由import navHeader from './components/common/navHeader.vue'，然后再全局注册Vue.component('navHeader', navHeader);这样在其它的组件可以直接引用<nav-header></nav-header>,也可以<nav-Header></nav-Header>,但是不可以<navHeader>    

2、在需要引入的路由注册（局部注册）

例如需要在index.vue引用公共组件navHeader.vue,可以先在script标签中import navHeader from './common/navHeader'导入，然后在esxport default的components中注册组件components:{navHeader}，然后在template模版中就可以直接用<nav-header>来使用公共组件了。

3、组件命名：https://cnodejs.org/topic/5816aabdcf18d0333412d323
4、注意了：如果报错：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead
那是因为组件模板应该包含一个根元素,例子中的template和自定义的组件例如：

<template>
<nav-header></nav-header>

  <div>呼出数据
    
  </div>

</template>

<nav-header></nav-header> 相冲突了,
解决办法：
将<template>中的元素用一个<div>包裹起来即可。

<template>
  <div>呼出数据
    <nav-header></nav-header>
  </div>

</template>

5、父组件获取子组件input的值

获取子组件input中的值，给子组件chile.vue的input标签加上ref="xxx"  父组件parent.vue的引用的子组件标签<child ref="yyy"></child>加上ref,随意命名，然后就可以通过this.$refs.getInput.xxx来获取了