$emit 和 $on 在vue中怎么使用

Dreampie commented 9 years ago

//app

App = Vue.extend
  components:
    'app-header': require './component/header'
    'app-sidebar': require './component/sidebar'
  ready: ->
    this.$on 'init-view', (data)->
      this.$data=data

//view

module.exports =
  template: require './template.html'
  ready: ->
    this.$emit 'init-view', menus: [
      {'name': '热词', 'icon': 'glyphicon glyphicon-header', 'url': '/hotwords'},
      {'name': '热词', 'icon': 'glyphicon glyphicon-header', 'url': '/a'}
    ],
    tabs: [
      {'name': '热词', 'icon': 'glyphicon glyphicon-header'},
      {'name': '热词', 'icon': 'glyphicon glyphicon-header'}
    ]

not work?

yyx990803 commented 9 years ago

仔细看文档啊：http://vuejs.org/api/instance-methods.html#vm-\$dispatch\(_event\,_\[args…\]_)

冒泡的事件要用 $dispatch, $emit 只触发本身的事件。

Dreampie commented 9 years ago

我把emit改成dispatch也不行

yyx990803 commented 9 years ago

父组件的 ready 触发比子组件晚。用 events 选项

Dreampie commented 9 years ago

非常感谢，已经触发了，怎么把触发传递的 data 数据给父级的 component？

<app-sidebar menus="{{menus}}"></app-sidebar>
<app-header tabs="{{tabs}}"></app-header>

Dreampie commented 9 years ago

谢谢搞定了，关于 require 'vue-resource' 返回空，能看看吗，npm安装的

gongph commented 7 years ago

下面的代码 vm.$emit('input', this.value) 为什么要触发 input 事件呢? 这个 input 事件是谁的呢？@yyx990803 @Dreampie @yyx990803

Vue.component('select2', {
  props: ['options', 'value'],
  template: '#select2-template',
  mounted: function () {
    var vm = this
    $(this.$el)
     .val(this.value)
      // init select2
      .select2({ data: this.options })
      // emit event on change.
      .on('change', function () {
      //alert(this.value);
        vm.$emit('input', this.value)
      })
  },
....

fnlctrl commented 7 years ago

@gongph https://cn.vuejs.org/v2/guide/components.html#自定义事件

gongph commented 7 years ago

多谢你的链接 @fnlctrl 刚才我自己做了一个例子，明白了。

gongph commented 7 years ago

hi, @fnlctrl 有个困惑的问题想请教您。我在看 @Vladimir Kharlampidi 大神封装的 framework7-vue 源码的时候，看到 tab.vue 组件中自定义事件的时候不是很明白，代码如下： tab.vue：

<template>
  <div class="tab" :class="active ? 'active' : false" @tab:show="onTabShow" @tab:hide="onTabHide">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    props: {
      'active': Boolean
    },
    methods: {
      onTabShow: function (e) {
        this.$emit('tab:show', e);
      },
      onTabHide: function (e) {
        this.$emit('tab:hide', e);
      }
    }
  }
</script>

不明白的是，@tab:show 可以在当前实例上使用吗？不应该是父组件在使用子组件的地方用 v-on 来监听子组件触发的事件吗？然而，我仿造上面的代码在我的 button.vue 组件中点击没有反应。下面是我的代码： button.vue

<template>
    <button class="btn btn-success" 
    @button:open="onOpen" 
    @button:closed="onClosed">
    <slot></slot>
    </button>
</template>

<script>
    export default {
        methods: {
            onOpen (event) {
                console.log('button open ...')
                this.$emit('button:open', event)
            },
            onClosed (event) {
                console.log('button closed ...')
                this.$emit('button:closed', event)
            }
        }
    }   
</script>

入口文件app.js

import Vue from 'vue'

import VueWebpack from '../src/vue-webpack.js'

Vue.use(VueWebpack)

const app = new Vue({
        el: '#app',
    methods: {
        onOpenTest (event) {
            alert('hello')
        }
    }
})

index.html

<body>
    <div id="app">
        <v-button @button:open="onOpenTest">button</v-button>
    </div>
    <script src="build.js"></script>
</body>

gongph commented 7 years ago

ps: 主要是 @tab:show="onTabShow" @tab:hide="onTabHide" 这点不是很明白。 @fnlctrl

vuejs / vue

$emit 和 $on 在vue中怎么使用 #1026