$emit( ) 触发组件（自定义元素）当前实例的事件

最新推荐文章于 2024-06-21 08:47:39 发布

灵灵7

最新推荐文章于 2024-06-21 08:47:39 发布

阅读量5.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_41796631/article/details/83002201

版权

vue 专栏收录该内容

68 篇文章 5 订阅

订阅专栏

$emit(event, args )

参数：

event：事件名

args：事件相关参数

用法：

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

在组件模板中，不能直接通过 v-on 绑定触发 vue 实例中的方法，而需要先使用$emit( ) 绑定自定义事件，把自定义事件发射出去（发射到html 层面）；

然后在html 层面，组件自定义元素上，绑定自定义事件和vue 实例中的方法，以此实现组件和vue 实例方法的绑定。

click--> $emit('welcome'), welcome --> sayHi

组件模板部分：
Vue.component('welcome-button', {
  template: `
     <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})
html 代码部分：
<welcome-button v-on:welcome="sayHi">
vue 实例部分：
new Vue({
  ...
  methods: {
    sayHi: function(){
                     alert('Hi!')
    }
  }
})

无参数例子：

<!--<a-button> 是一个组件，只能绑定自定义事件 v-on:welcome="sayHi",不能直接绑定原生事件click-->

<div id="div">
    <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

<script>

Vue.component("welcome-button",{
//组件内部的dom元素<button> 可以直接绑定原生事件click，然后把原生事件click和自定义事件"welcome"绑在一起。
//$emit( ) 方法是触发当前实例的里面的方法（这里是触发了welcome 这个自定义事件(方法)）

    template:`<button v-on:click="$emit('welcome')">点击通过emit( )触发事件</button>`
})

new Vue({
   el:"#div",
   methods:{sayHi:function(){
             alert("hi")}
   }
})
</script>

解析：

<a-button> 是一个组件，只能绑定自定义事件 v-on: welcome="sayHi", 不能直接绑定原生事件click

所以通过 $emit 绑定

<div id="div">
    <a-button v-on:welcome="sayHi"></a-button>
</div>

组件模板层面：组件内部的dom元素<button> 可以直接绑定原生事件click，但是无法直接触发vue 实例中的 "sayHi"，而是先要把原生事件click和自定义事件"welcome"绑在一起。把 "welcome" 自定义事件发射到 html 层面
html 代码层面：然后在组件自定义元素<a-button> 使用 v-on，绑定自定义事件 "welcome" 和实例中的 "sayHi"方法

$emit( ) 方法是触发当前实例的里面的方法（这里是触发了 welcome 这个自定义事件(方法)），再传给 v-on 触发vue实例的 "sayHi" 方法

Vue.component("welcome-button",{
template:`<button v-on:click="$emit('welcome')">点击通过emit( )触发事件</button>`
})

new Vue({
   el:"#div",
   methods:{sayHi:function(){
                            alert("hi")}
   }
  })

网页效果：

实例中的 "sayHi" 函数，已经通过 click--> $emit('welcome'), welcome --> sayHi 触发了

疑问："welcome" 这个自定义事件名怎么来的？在实例和组件中都没有看到有"welcome"字符？

在用 v-on 绑定的时候 <button v-on:click="welcome" > 和 <a-button v-on:welcome="sayHi">

产生连接时，生成的自定义事件名。其实这个welcome 事件绑定的就是实例里面 sayHi 这个函数

另一个完整例子：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <meta charset="utf-8">
  <title> </title>
  <style>
    .clickBox{
      border: solid 1px black;
      height: 30px;
      width: 30px;
    }
  </style>
</head>
<body>

<div id="emit">
  <magic v-on:give-advice="showAdvice"></magic>
</div>

<script type="text/javascript">

  //组件要放在实例前面声明！！
  //否则会出现 报错：组件未声明

  Vue.component('magic', {
    data: function () {
      return {
        possibleAdvice: ['Yes', 'No', 'Maybe']
      }
    },
    methods: {
      giveAdvice: function () {
        var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
        this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
      }
    },
    template: `
    <button v-on:click="giveAdvice">
      Click me for advice
    </button>
  `
  })

  var App=  new Vue({
    el: '#emit',
    methods: {
      showAdvice: function (advice) {
        alert(advice)
      }
    }
  })

</script>
</body>
</html>

点击按钮后弹出警告框：

灵灵7

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
$emit( ) 触发组件（自定义元素）当前实例的事件

$emit(event, args )参数：event：事件名args：事件相关参数用法：触发当前实例上的事件。附加参数都会传给监听器回调。在组件模板中，不能直接通过 v-on 绑定触发 vue 实例中的方法，而需要先使用$emit( ) 绑定自定义事件，把自定义事件发射出去（发射到html 层面）；然后在html 层面，组件自定义元素上，绑定自定义事件和vue ...
复制链接

扫一扫