Vue自定义事件

最新推荐文章于 2024-06-02 11:11:40 发布

阿喵~~

最新推荐文章于 2024-06-02 11:11:40 发布

阅读量1.7w

点赞数 14

分类专栏：整理文章标签： Vue自定义事件

本文链接：https://blog.csdn.net/qq_40616529/article/details/93652453

版权

整理专栏收录该内容

31 篇文章 0 订阅

订阅专栏

父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。

1、自定义事件

每个Vue创建的实例都会出现一个事件接口

 var vm = new Vue({
    el: '#app'
  })

自定义事件的定义(发布)

 //vm.$on(自定义事件的名称，自定义事件的事件处理程序)
 vm.$on( 'aa', function () {
    console.log( 'aa' )
  })

//自定义事件的触发（订阅）

 // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)

    vm.$emit( 'aa' )

2、自定义事件的数据传递

我们通过下面代码分析一下自定义事件的数据传递

<body>
   <div id="app">
      <Father></Father>
   </div>

   <template id="father">
      <div>
         <h3>这里是父组件</h3>
         <p>儿子给我{{ money}} </p>
         <Son @hongbao="givemoney"></Son>
      </div>

   </template>

   <template id="son">
      <div>
         <h3>这里是子组件</h3>
         <button @click="give">给父亲红包</button>
      </div>
   </template>
</body>

<script>
   Vue.component('Father',{
      template:'#father',
      data(){
         return {
            money:0,
         }
      },
      methods:{
          //自定义事件的定义(发布)
         givemoney(val){
            this.money=val;
         }
      }

   });

   Vue.component('Son',{
      template:'#son',
      data(){
        return {
           money:3000,
        }
      },
      methods:{
         //自定义事件的触发 （ 订阅 ）
         give(){
            console.log(this.money)
            this.$emit('hongbao',this.money)
         }
      }
   })

   new Vue({

   }).$mount('#app')

从上述代码可以看出，父组件通过$on监听事件，事件处理函数的参数则为接收的数据

 methods:{
          //自定义事件的定义(发布)
         givemoney(val){
            this.money=val;
         }
      }

子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据

  methods:{
         //自定义事件的触发 （ 订阅 ）
         give(){
            console.log(this.money)
            this.$emit('hongbao',this.money)
         }
      }

阿喵~~

关注

14
点赞
踩
53

收藏

觉得还不错? 一键收藏
3
评论
Vue自定义事件

父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。1、自定义事件每个Vue创建的实例都会出现一个事件接口 var vm = new Vue({ el: '#app' })自定义事件的定义(发布) //vm.$on(自定义事件的名称，自定义事件的事件处理程序) vm.$on( 'aa', function () { ...
复制链接

扫一扫