组件
组件化开发
、组件中的data必须是一个函数
、组件化的开发其实就是把页面拆分成一块一块的,每一个块可以看做是一个组件
、组件是一个可以重复使用的vue实例
、语法:
//vue的组件也是vue的一个实例
//my-header 为组件的名字
//{}组件的配置
//组件对应的html结构 – 模板
//使用该组件—>以标签的形式调用组件
Vue.component(‘my-header’,{
//全局注册组件
//相当于new vue中的el
template:`<header>头部</header>`
})
注册组件
全局注册组件
、定义组件 const MyHeader = {
//对象
template:<header>头部</header>
}
、全局注册组件
Vue.component(‘my-header’,MyHeader)
、使用组件
new Vue({
})
未完。。。
局部注册组件
、定义组件 const MyHeader = {
//对象
template:<header>头部</header>
}
、局部注册组件
new Vue({
el:’#app’,
components:{
‘my-header’:MyHeader
}
})
、使用组件
总结
定义===注册(全局,局部)===使用
、全局,不加s
、局部,在new vue 所有自定义的组件都要放在此处,要加s,写的是key:value形式
、用的更多的是局部注册组件
多组件
嵌套组件
、、关系==父子组件、兄弟组件
、、因为子组件在父组件内容区域内,所以需要在此内部进行注册组件
、、使用组件,也是在父组件内部使用子组件
小知识点
在标签之后
设置
抽离组件
。。。。未完待续
组件数据的初始化
、、组件内部所有初始化数据的形式语法:
data(){
//组件数据初始化为一个data函数,返回一个对象
return {
}
}
父子组件间的传值
总结一句话:父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息
父传子
- 父组件在调用子组件的地方添加自定义的属性
- 属性的值就是需要传给子组件的值
- 如果属性的值是number,boolean,变量,需要用到绑定属性
- 在子组件定义的地方添加选项props,props的值可以为数组或对象
- 如果是数组,元素为父组件中自定义的属性名
- 在子组件中通过自定义的属性名,就可以得到父组件传过来的数据
- 如果是对象,,,,
总结:
父在调用子的地方添加自定义属性,在子组件定义的地方通过props向下传递数据给子,最后在子组件中通过自定义属性名接收父传来的数据
即:
1.先添加需要传递的数据
父在调用子的地方添加需要传递的数据
2.父发送:
父在定义子的地方传递数据
3.子接收:
在子中通过自定义属性名接收
**子传父**
- 父组件在调用子组件的地方,绑定一个自定义事件,事件不加()
- 在父组件methods中实现此事件,默认参数是将从子组件传递给父组件的值
- 在子组件中(可以是生命周期钩子函数,也可以是组件自己的事件),去 触发 父组件中的自定义事件
另表述
- 父组件在调用子组件的地方绑定一个自定义事件方法,并传递到子组件内部
- 子组件在内部调用父组件传过来的事件方法,同时把要发送给父组件的数据,在调用方法的时候当做参数传递进去
- 父组件就接收到子组件传递过来的数据了
总结
核心思想 通过子传参给从父那里接收到的自定义事件实现传值
父发送:父先发送一个自定义事件:父在调用子时绑定了一个自定义事件方法传给子
子接收并发送:在子内部通过(this.$emit)调用接收到的事件方法,并把需要传送的数据当做参数传递
父接收:父在自己methods方法里执行此事件
总结
子组件发送:子组件通过$emit传参的方式将数据传给父
$emit()两个参数,一个是接收到的父组件在调用子组件时自定义事件方法,两一个是需要传的数据
父组件接收:在父组件中methods方法里执行绑定的事件
非父组件间的传值
中央事件组件
new Vue 作为中央事件组件
先监听 再发送
监听 bus.
o
n
发
送
b
u
s
.
on 发送 bus.
on发送bus.emit
动态组件
就是组件在切换的时候销毁与重建
保留组件状态,避免组件的重新渲染
生命周期函数面试题
1、什么是vue生命周期?
答: Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
2、vue生命周期的作用是什么?
答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段?
答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后
4、第一次页面加载会触发哪几个钩子?
答:第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
5、DOM 渲染在 哪个周期中就已经完成?
答:DOM 渲染在 mounted 中就已经完成了。
6、简单描述每个周期具体适合哪些场景?
答:生命周期钩子的一些使用方法: beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom