组件的通信:

组件的通信:

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节点还是存在,影响浏览器性能。善后:比如计时器,滚动条事件等生命周期案列;或在组件销毁时进行提示。

其他的三个钩子函数:

activatedkeep-alive 组件激活时调用。
deactivatedkeep-alive 组件停用时调用。
errorCaptured当捕获一个来自子孙组件的错误时被调用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值