Vue基础 中
一、组件
1.组件概述
组件化:封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护
组件:是可复用的Vue实例,封装标签、样式和JS代码
2.vue组件——创建
每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件
-
组件内template只能有一个根标签
-
组件内data必须是一个函数, 独立作用域
3.vue组件——全局注册使用
全局入口在main.js, 在new Vue之上注册
//main.js引入
import Vue from 'vue'
import 组件对象 from 'vue文件路径'//引入组件文件对象
Vue.component("组件名", 组件对象)// 组件名开头大写驼峰(推荐)
使用如:<PannelC></PannelC>//把这个自定义标签当做组件解析
4.vue组件——局部注册使用
//App.vue中引入, 注册, 使用
import 组件对象 from 'vue文件路径'
export default {
components: {
"组件名": 组件对象
}
}
- 组件使用总结
①(创建)封装html+css+vue到独立的.vue文件中
②(引入注册)组件文件 => 得到组件配置对象
③(使用)当前页面当做标签使用
5.vue组件——scoped作用
作用:解决多个组件样式名相同,冲突问题
加上scoped属性,即自动给标签添加data-v-hash值属性
二、组件通信
1.父向子 props
例如: App.vue(父) MyProduct.vue(子)
步骤:
- 创建组件components/MyProductvue - 准备标签
- 组件内在props定义变量, 用于接收外部传入的值(props属性名建议都小写,因为标签里的属性只能小写/把变量驼峰转成-连接)
- App.vue中引入注册组件, 使用时, 传入具体数据给组件显示
注意:在vue中需要遵循单向数据流原则:从父到子的数据流向。
props的值不能重新赋值, 对象引用关系属性值改变, 互相影响
2.子向父
步骤
- 父: @自定义事件名=“父methods函数”
- 子: this.$emit(“自定义事件名”, 传值) - 执行父methods里函数代码
总结:父自定义事件和方法, 等待子组件触发事件给方法传值
3.跨组件通信 EventBus
//EventBus/index.js- 定义事件总线bus对象
import Vue from 'vue'
const bus = new Vue()
export default bus
//List.vue注册事件
eventBus.$on('事件名', 函数体)
//Myp.vue
import eventBus from '../EventBus'
eventBus.$emit('事件名', 值)
总结: 空的Vue对象, 只负责 $on注册事件, $emit触发事件, 一定要确保 $on先执行
三、组件生命周期
- 生命周期:一组件从创建到销毁的整个过程
- 生命周期函数(钩子函数):vue 框架内置函数,随着组件的生命周期,自动按次序执行
- 分类:初始化、挂载、更新、销毁
- 当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数
beforeCreate() {
// 1. 创建前,在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
console.log("beforeCreate --- data初始化之前");
console.log(this.msg); // undefined
},
created() {
// 2. 创建后,在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
console