Vue中创建组件及引入组件及调用

Vue中创建组件及引入组件及调用

---

---

Vue创建组件

`

Vue框架最核心思想就是组件化，方便开发，便于维护管理，那么，如何在vue中创建组件及如何引用呢？

---

一、什么是组件？

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

二、如何注册组件？

1.注册组件

需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
    // 选项...
})

如果想要其他地方使用这个创建的组件，还得个组件命个名：

Vue.component('my-component', MyComponent)

命名之后即可在HTML标签中使用这个组件名称，像使用DOM元素一样。下面来看看一个完整的组件注册和使用例子。

<div id="example">
    <my-component></my-component>
</div>

// 定义
var MyComponent = Vue.extend({
    template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
    el: '#example'
})

<div id="example">
    <div>A custom component!</div>
</div

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})

// 局部注册也可以这么做
var Parent = Vue.extend({
    components: {
        'my-component': {
            template: '<div>A custom component!</div>'
        }
    }
})

2.vue项目中引入组件

vue是组件化的开发。一个页面中，是一个组件，他也是由多个组件构成的。使用v-cli自动搭建脚手架，他已经给我们配好了路由，还做好了一个HelloWorld的界面。
那么这个界面是怎么被引用到的？

首先我们知道，项目中main.js是整个项目的入口

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

可以看到就在这里它创建了一个根组件，然后根组件引入了
router：路由
App.vue：组件
等等
顺着这里我们再看一下App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

这里也没有样式。但是我们看到了蹊跷！。路由匹配到的组件将渲染在这里。

我们再看路由router文件夹下的index.js。这个是项目的路由文件

import Vue from 'vue'
import Router from 'vue-router'
import HomeA from '@/pages/Home/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HomeG',
      component: HomeA
    }
  ]
})

---

总结

以上就是今天要讲的内容，本文简单介绍了vue的组件，以及在项目中如何对组件进行引用，希望对大家有所帮助。