组件的通信:
1.父—>子组件通信:
Vue.component('Father',{
template: '#father',
data () {
return {
money: 10000
}
}
})
Vue.component('Son',{
template: '#son',
props: ['money']
})
props:props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。
2.子—>父组件通信:
子父组件通信是通过自定义事件实现的
*
<Son @get = "get"></Son>
this.$emit(‘get’,参数)* :写在子组件的事件程序里,父组件用一个get()方法接收
3.同父—子组件之间通信:
假设:
发出端子组件:a; 接收端子组件:b;
a通过props[‘kick’]获取到父组件的kick事件,再进行动态绑定;
b通过设置ref属性来将自己引用信息注册到父组件的$refs对象上, *;
父组件 kick () { this.$refs.son.changeFlag() }写入kick方法,a可以使用此方法,来对b进行操作;
4.非父—组件之间通信:
**bus事件总线思维:将new Vue() 的实例作为全局变量,用来联通非父子组件
假设:
发出端子组件:a; 接收端子组件:b;
先设置: var bus=new Vue
在a组件实例中设置:mounted(){ bus.$emit(‘事件名’,‘参数’)}
mounted(){}: 表示组件挂载结束,视图中已经能看到界面了
bus.$emit : 触发当前实例上的事件。附加参数都会传给监听器回调
在b组件实例中设置:mothods:{ bus.$on(‘事件名’,function(‘参数’){}) }
bus.on:监听当前实例上的自定义事件。事件可以由‘vm.on : 监听当前实例上的自定义事件。事件可以由`vm.on:监听当前实例上的自定义事件。事件可以由‘vm.emit`触发。回调函数会接收所有传入事件触发函数的额外参数。
5.自定义过滤器:
全局:
html:
js:
* Vue.filter('imgFilter',function ( val,size ) {*
* //val就是我们即将要格式化的数据*
* return val.replace('w.h', size )*
*})*
局部:
filters: {
'imgFilter': function ( *val*,*size* ) {
return val.replace('w.h', size )
}
}
6.插槽——solt:
**作用:**1.在组件内留空间,用来插入标签
使用方法:组件里: ;
html标签里:
2.作用域插槽:
用于解决问题:将组件的数据用到组件的内容中
使用方法:组件里:
html标签里:
{{ scope.money }}
7.自定义指令:
注册全局指令:v-focus
*Vue.directive('focus',{*
inserted ( el ) {*
el.focus()*
* }*
*})*
注册局部指令:v-focus:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
8.异步组件:
Vue.component('async-comp',( *resolve*,*reject* ) => {
setTimeout(() => {
resolve({
template: '<div> 异步组件 </div>'
})
}, 0);
})
9.生命周期:
Vue生命周期的八个钩子函数:
| 钩子函数 | 触发行为和意义 | 在此阶段可以做的事情 |
|---|---|---|
| beforeCreadted | 组件创建前;为整个生命周期做准备工作,初始化事件和自身或是子组件的生命周期做准备;数据拿不到,真实DOM拿不到。 | 加loading事件 |
| created | 组件创建结束;初始化注入其他选项和激活选项,数据可以拿到,真实DOM拿不到。 | 数据请求,也可以修改一次数据;结束loading、请求数据为mounted渲染做准备。 |
| beforeMount | 组件挂载前;vue实例的$el和data都初始化了,但还是虚拟的dom节点;数据拿不到,真实DOM拿不到。 | 数据请求,数据修改 ;建议不要去使用它了,让它完成内部事务,不给加负担 |
| mounted | 组件挂载结束,也就是已经插入到页面中了;vue实例挂载完成,data.filter成功渲染;数据可以拿到,真实DOM可以拿到。 | 数据修改,数据请求 ;真实DOM操作 【 不推荐 】 理由: 我们要用数据驱动视图 应该做的: 第三方实例化 【 静态数据 】 |
| beforUpdate | 组件更新前;为再一次更新做准备工作,生成VDOM,可以拿到更新后的数据和更新后的真实DOM。 | 不常用 |
| updated | 组件更新结束;可以拿到更改后的数据,可以拿到真实DOM。 | 真实DOM操作 【 不推荐 】; 第三方库动态实例化 【 动态数据 】 |
| beforeDestroy | 组件销毁时,(销毁前) | |
| destroyed | 组件销毁时,(销毁后);在执行$destroy方法后,对data的改变不会再触发周期函数;vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在;我们必须手动removeChild()删除该节点;否则,DOM节点还是存在,影响浏览器性能。 | 善后:比如计时器,滚动条事件等生命周期案列;或在组件销毁时进行提示。 |
其他的三个钩子函数:
| activated | keep-alive 组件激活时调用。 | |
|---|---|---|
| deactivated | keep-alive 组件停用时调用。 | |
| errorCaptured | 当捕获一个来自子孙组件的错误时被调用 |

被折叠的 条评论
为什么被折叠?



