Vue_组件详解
初识组件
组件(Component),是对数据和方法的简单封装。
组件化开发提高了代码的复用性和灵活性,同时提升了后期的可维护性。
vue 是一个完全支持组件化开发的框架,vue 中 .vue的后缀文件即为组件。几乎任何应用的界面都可以抽象为一个组件树。
组件组成
- < template >< /template > : 组件的模板结构
- < script >< /script > : 组件的 JavaScript 行为
- < style>< /style>:组件的样式
每个组件必须包含 template 模板结构,script 和 style 是可选组成部分。
组件的根节点
emplate模板的直接子元素就组件的根节点。
<template>
<div>我是根节点</div>
</template>
父子组件
包含一个或多个子组件的组件是父组件。
组件注册
vue 中注册组件的方式分为“全局注册”和“局部注册”两种。
全局注册
在main.js文件中导入组件,用Vue.component方法进行注册。
// 1. 导入需要被全局注册的组件
import Test from './components/Test.vue'
// 2. 注册组件
Vue.component('Test', Test)
局部注册
在使用的组件中注册。
// 1