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的组件,以及在项目中如何对组件进行引用,希望对大家有所帮助。

Logo

前往低代码交流专区

更多推荐