vue组件基础

 

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法

概述

　　在 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>

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 必须是一个函数