Vue中创建组件及引入组件及调用
第一章 Vue中创建组件及引入组件及调用文章目录一、什么是组件?二、如何注册组件?1.注册组件2.vue项目中引入组件总结Vue创建组件`Vue框架最核心思想就是组件化,方便开发,便于维护管理,那么,如何在vue中创建组件及如何引用呢?一、什么是组件?组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功
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的组件,以及在项目中如何对组件进行引用,希望对大家有所帮助。
更多推荐
所有评论(0)