vue组件基础
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。根据项目需求,抽象出一些组件,每个组件里包含了展现、功能和样式。每个页面,根据自己所需,使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法
![](https://images2017.cnblogs.com/blog/740839/201708/740839-20170806165940240-474901218.png)
概述
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例
组件是一个自定义元素或称为一个模块,包括所需的模板、逻辑和样式。在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能。通过Vue.js的声明式渲染后,占位符将会被替换为实际的内容
下面是一个最简单的模块示例
<div id="app"> <xiaohuochai></xiaohuochai> </d
注册组件
组件注册包括全局注册和局部注册两种
【全局注册】
要注册一个全局组件,可以使用 Vue.component(tagName, options)
Vue.component('my-component', { // 选项 })
组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component>
的形式使用
[注意]要确保在初始化根实例之前注册了组件
<div id="example"> <my-component></my-component> </div>
<script> // 注册 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 创建根实例 new Vue({ el: '#example' }) </script>
![](https://images2017.cnblogs.com/blog/740839/201708/740839-20170805103401475-489546861.png)
data数据
一般地,我们在Vue实例对象或Vue组件对象中,我们通过data来传递数据
<div id="example"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div>
<script> // 注册 Vue.component('my-component', { template: '<div>{{message}}</div>', data:{ message: 'hello' } }) // 创建根实例 new Vue({ el: '#example' }) </script>
运行上面的代码,会使Vue停止执行,并在控制台发出错误提示,告诉你在组件中 data
必须是一个函数