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

文章目录

• 一、什么是组件？
• 二、如何注册组件？
• • 1.注册组件
  • 2.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: '
A custom component!
'})// 注册Vue.component('my-component', MyComponent)// 创建根实例new Vue({    el: '#example'})

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

// 在一个步骤中扩展与注册Vue.component('my-component', {template: '
A custom component!
'})// 局部注册也可以这么做var Parent = Vue.extend({    components: { 'my-component': {     template: '
A custom component!
' }    }})

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: ''})

可以看到就在这里它创建了一个根组件，然后根组件引入了
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的组件，以及在项目中如何对组件进行引用，希望对大家有所帮助。