组件化开发
根据封装的思想,把页面上可重复用的UI结构封装为组件,从而方便项目的开发和维护
组件-->实现应用中局部功能代码和资源的集合
vue支持组件化开发,组件的后缀名是.vue。每个.vue组件都由3部分构成:
1. template-->组件的模板结构 (DOM标签)
template标签只起到包裹的作用,不会被渲染成真实的元素
<template> <div class="test-box"> <h3>这是用户自定义的组件</h3> <div>用户名:{{ username }}</div> <button @click="changeName">修改用户名</button> </div> </template>
注意:在template标签中,只允许存在一个根元素(所以template里面要加一个div作为根元素包裹其他元素)
2. script--> 组件的JavaScript行为
// 注意:在组件中,script标签内必须写 默认导出 的语法(固定格式,一定要写) // export default {} export default { // 注意:组件中的data不能像之前一样指向一个对象,而是一个函数 // 目的是防止组件被复用的时候产生数据的关联关系,从而造成干扰 data(){ // 当前组件的data数据源 return { // 返回值return一个存放数据的对象 username: 'zhangsan' } }, methods: { console.log(this) // 这里的this指向的是当前Vue组件的实例对象 changeName(){ this.username = 'lisi' // data方法中的username是当前组件的实例对象中的一个属性,可以通过 "对象.属性名" 来调用 } } // 当前组件的侦听器watch、计算属性computed的设置都跟之前的定义方式一样 }
3. style--> 组件的样式
// css样式表的书写位置 // 加了lang属性才能使用less语法 <style lang="less"> .test-box { background-color: pink; } h3 { color: red; } </style>
组件之间的关系
使用组件的三个步骤:
在App.vue组件中
1. 使用import语法 导入 需要的组件
// 写在script标签内 // @ 代表的是src这层路径 import Left from '@/compents/Left.vue'
2. 使用components节点 注册 组件
export default { components: { 'Left': Left // '组件名称': 组件 键值对 // 因为键和值一样,所以直接简写为一个Left也可以 } }
注意1:使用components注册的节点是私有子组件
注意2:这里的组件注册名称的设置是为了在使用组件的时候写的标签名;而组件声明的时候可以设置的name属性(与data平级的name节点),主要是在存储的时候使用(在调试工具中也会显示自己设置的name属性)
注意3:若在声明组件的时候没有指定name属性,则组件的名称默认就是注册时的名称
3. 以标签的形式 使用 上面注册的组件
<div class="box"> <Left></Left> </div>
注意:组件创建后并没有生成实例,只有在以标签的形式使用了组件的时候才生成了组件实例( new Vue( ) )
私有子组件与全局组件
- 通过components注册的是私有子组件
例如:在组件A的components节点下注册了组件B,则组件B只能用在组件A中,而不能用在别的组件中
在一些组件需要在不同组件中频繁使用的时候,需要在各个组件中注册,比较繁琐且代码冗余。可以通过全局组件解决
- 注册全局组件
在vue项目的main.js入口文件中,通过Vue.component( )方法注册全局组件
// 在main.js中 // 导入需要全局注册的组件 import Count from '@/components/Count.vue' // 使用Vue构造函数的component方法 // 参数1:表示组件的"注册名称",字符串格式。使用组件时的标签名就是<MyCount></MyCount> // 参数2:需要被全局注册的组件 Vue.component('MyCount', Count)
注意!!!要先注册全局组件,再在实例中使用组件。(即必须在Vue实例化之前注册全局组件,否则组件不会生效)