vue中动态指令参数 Vue2.x-$on,$once,$off以及$emit的使用 @hook, Observable实现Vue全局状态共享

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全局状态共享

 

vue中动态指令参数   Vue2.x-$on,$once,$off以及$emit的使用   @hook,   Observable实现Vue全局状态共享

 

 

 




vue中动态指令参数 Vue2.x-$on,$once,$off以及$emit的使用 @hook, Observable实现Vue全局状态共享

上一篇:C# 反射机制(转)


下一篇:Nginx作为负载均衡服务器(Windows环境)