zoukankan      html  css  js  c++  java
  • vue2.0 #$emit,$on的使用

    vm.$on(event,callback)

    监听当前实例上的自定义事件,事件可以由vm.$emit触发,回调函数会接收所有传入事件触发函数的额外参数

    vm.$emit(event,[..args])

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

    例子:

    //父组件

    <template>

      <ratingselect @select-type="onSelectType">

      </ratingselect>

    </template>

    <script>

      data () {

        return { selectType: 0,

      },

      methods: {

        onSelectType (type) {

          this.selectType = type

      } }

    </script>

    父组件使用@select-type="onSelectType"监听由子组件vm.$emit触发的事件,通过onSelectType()接受从子组件传递过来的数据,通知父组件数据改变了。

    // 子组件

    <template>

       <div>

        <span @click="select(0, $event)" :class="{'active': selectType===0}"></span>

         <span @click="select(1, $event)" :class="{'active': selectType===1}"></span>

        <span @click="select(2, $event)" :class="{'active': selectType===2}"></span>

      </div>

    </template>

    <script>

       data () {

        return {

          selectType: 0,

         },

      methods: {

        select (type, event) {

           this.selectType = type

          this.$emit('select-type', type)

        }

    }

    </script>

    子组件通过$emit来触发事件,将参数传递出去。

  • 相关阅读:
    关系图的缩放、拖移、边上的关系显示、自定义等
    数据嵌入js的关系图
    十二周周四
    去除mysql里面重复的行并留下id最小的
    十一周周日
    十一周周六
    计算一个字符串中每个词的数量并降序输出
    账户 需求分析
    《人月神话》阅读计划
    读博客,了解本学期《软件需求与分析》掌握必要的内容
  • 原文地址:https://www.cnblogs.com/learnings/p/9021286.html
Copyright © 2011-2022 走看看