vue组件

组件（Component）是 Vue.js 最强大的功能之一。它可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

组件创建
vue当中创建单文件组件
App.vue 是vue项目的主模板 （组件 主组件）
自己定义一个文件 component 放置子组件
1.如何创建组件 直接建立对应的vue文件就是单个组件
2.如何注册组件 （挂载组件）
三个子组件 需要挂载到app组件里面 就在该组件内部直接引入子组件

<div class="app_top">
      <topTitle></topTitle>
    </div>
    <div class="app_bottom">
      <leftMenu></leftMenu>
      <rightContent></rightContent>
    </div>

1、局部组件
组件在谁里面使用 ，在谁里面注册-----这中注册方式叫局部注册
注：局部注册的组件只能在父组件里面使用。

1.在script里面引入

import topTitle from "./component/systemtoptitle";
import leftMenu from "./component/systemleftmenu";
import rightContent from "./component/systemrightcontent";

2.注册组件：在属性components里面进行注册
常规写法 ：键值的形式，简写，直接使用组件变量，键和值一样的时候可以直接简写。

new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }

3.注册完成之后，使用组件

export default {
  name: "app",
  components: {
    // "v-toptitle": topTitle,
    // "v-leftmenu": leftMenu,
    // "v-rightcontent": rightContent
    topTitle,
    leftMenu,
    rightContent
  },
  data() {
    return {};
  }
};

二、全局组件
全局注册：在mainjs里面进行注册，这种叫全局注册。
整个项目的组件都可以使用，注册给整个vue对象。

1、引入需要注册的全局组件
在vue类的方法 component里面进行注册

Vue.component("v-times",getTime);
 Vue.component('v-times',{
   template:"<div>{{msg}}</div>", //字符串的标签模板
   data(){   //当前模板的数据
     return {
       msg:"时间1"
     }
   }
 });

非父组件直接通信使用事件车，来源于new Vue()

Vue.prototype.EmitEvent=new Vue();
new Vue({
  el: '#app',
  render: h => h(App)
})

注册并使用实例：

//注册一个简单的全局组件 runoob，并使用它：
<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

三、总结
本篇总结了vue中的组件，在运用的时候以可去引用，充分发挥vue的强大功能。