vue中动态指令参数
就是@click和:herf中click和href都可以动态来写入,用方括号方式@[first]或者:[second] 其中fitst和second就是data中的
export default {
data () {
return { first: "click",second:‘href‘ }
}
}
指令是动态的
就是@click和:herf中click和href都可以动态来写入,用方括号方式@[first]或者:[second] 其中fitst和second就是data中的
export default {
data () {
return { first: "click",second:‘href‘ }
}
}
指令是动态的
Vue2.x-$on,$once,$off以及$emit的使用
$on
使用:vm.$on(‘事件名称‘,callback)
说明:监听当前实例(vm)中的自定义事件,事件可以由$emit定义//监听事件被触发
$once
使用:vm.$once(‘事件名称‘,callback)
说明:监听当前实例(vm)中的自定义事件,事件可以由$emit定义,但是只会触发一次,触发后即解除//监听事件被触发
$off
使用:vm.$off(‘事件名称‘)
说明:关闭当前实例中的自定义事件
$emit
使用:vm.$emit(‘事件名称‘,args)
说明:自定义事件//解除监听
created() { this.$on(‘ChildClickFn‘, arg => { console.log(‘我是用$on监听事件并触发的,子组件的clickFn被执行了,参数是:‘, arg); }); this.$once(‘ChildClickFn‘, arg => { console.log(‘我是用$once监听事件并触发的,参数是:‘, arg); }); },
VUE @hook浅析
可以在一个生命周期方法里监听其余生命周期的发生。
一些情况下确实可以达到优化或简化代码的效果。比如到多个生命周期的逻辑都非常简单,简单到只有一句时,
这个时候就可以考虑将这些代码放在 created 或者 mounted 里通过这种方式来监听并执行那些简单逻辑。
上面的是在组件内的使用,在组件外的使用同样简单。
mounted() { const timer = setInterval(() => { ... }, 1000); this.$once(‘hook:beforeDestroy‘, () => clearInterval(timer);) }
当我们需要在父组件上知道子组件什么时候被创建、挂载或者是更新,特别是当为原生js库创建组件时,可以通过使用 @hook: 前缀监听生命周期中的钩子,并指定回调函数。
举个例子,如果你想要在第三方组件v-runtime-template渲染时做一些事情,那么你可以监听它的生命周期中的updated钩子
<v-runtime-template @hook:updated="doSomething" :template="template" />@hook前缀监听生命周期中的钩子,并指定回调函数。
Observable实现Vue全局状态共享
项目不大, 又不想用Vuex, 那么使用Observable来实现状态共享也不失为一个选择.
vue中动态指令参数 Vue2.x-$on,$once,$off以及$emit的使用 @hook, Observable实现Vue全局状态共享