父组件使用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)
         }
      }
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue