美文网首页
vm.$on and vm.$emit(父子组件的通信)

vm.$on and vm.$emit(父子组件的通信)

作者: 付出的前端路 | 来源:发表于2017-12-04 20:50 被阅读0次

    注意:祖孙之间的通信不适用此方法

    vm.$on && vm.$emit

    代码演示

    //父组件
    <template>
      <ratingselect @select-type="onSelectType"></ratingselect>
    </template>
    <script>
      data () {
       return {
        selectType: 0,
      },
      methods: {
       // 接收事件,接收type
       onSelectType (type) {
        this.selectType = type
       }
      }
    </script>
    

    父组件使用@select-type="onSelectType",@就是v-on的简写,监听由子组件vm.$emit触发的事件,通过style="color:red">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
          // 触发事件,传递数据type
          this.$emit('select-type', type)
       }
      }
    </script>
    

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

    参考链接:demo来源脚本之家

    相关文章

      网友评论

          本文标题:vm.$on and vm.$emit(父子组件的通信)

          本文链接:https://www.haomeiwen.com/subject/xtdfixtx.html