VUE vm.$emit

首先呢要知道,vue自定义的组件绑定事件是不能直接在html页面组件标签上直接用@或v-on绑定事件的

像这样,是行不通滴:

<component v-on:click="test"> 我的组件 <component>      

还有就是在定义组件模板时在字符串中绑定事件,像这样也是不行的:

Vue.component('welcome-button', {
  methods:{
    jiade:function(){
     // this.$emit("welcome");
      alert("都是假的")
    }
  },

  template: `
    <button v-on:click="jiade">               
      Click me to be welcomed
    </button>
  `
}
) 

 自定义的组件模板中只能调用该组件中定义的方法,不能调用父组件中的方法。

 

那么我们就先说用这篇文章主要介绍的$emit()来解决这个问题。(你可能会说用 .native 就可以,后面介绍) 

vm.$emit( eventName, […args] )

  • 参数

    • {string} eventName         事件名(形参)
    • [...args]                  传入事件处理函数的参数

    触发当前实例上的事件。附加参数都会传给监听器回调。

例如:

<div @click="$emit('shijian')"></div>
<!--单击后click事件触发,而响应的处理函数就是$emit('shijian'),
    $emit('shijian')触发的是使用该组件时,该组件实例上绑定的事件'shijain'
 -->

1、绑定单个事件

<div id="emit-example-simple">
    <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
Vue.component('welcome-button', {
  //  $emit() 触发当前实例上的事件,附加参数都会传给监听器回调。
  //  如下方法 $emit('welcome') 返回 模板所在的容器的方法:sayHi 传给click监听器
  //  (其实就是sayHi为参数,然后将参数原封不动的传给了监听器)
  template: `
    <button v-on:click="$emit('welcome')">               
      Click me to be welcomed
    </button>
  `
})  

new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Hi!')
    }
  }
})

2、绑定事件并传入参数

<div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>
Vue.component('magic-eight-ball', {
  data: function () {
    return {
      possibleAdvice: ['Yes', 'No', 'Maybe']        //参数
    }
  },
  methods: {
    giveAdvice: function () {
      var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
       //this.possibleAdvice[randomAdviceIndex] 即为传入give-advice事件处理函数的参数
      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
    }
  },
  template: `
    <button v-on:click="giveAdvice">
      Click me for advice
    </button>
  `
})


new Vue({
  el: '#emit-example-argument',
  methods: {
//父节点实例方法
    showAdvice: function (advice) {
      alert(advice)
    }
  }
})

 

*简单提一下 .active 事件修饰符 

<component v-on:click.native="test"> 我的组件 <component>      

如上代码所示 事件加上 .native修饰符后就可以调用父组件实例中定义的方法了

其原理可以简单理解为加上.native后会将DOM变为原生的标签来解析,而忽略组件标签

 

阅读更多

没有更多推荐了,返回首页