阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js emit

      vm.$emit( eventName, […args] )

      • 参数

        • {string} eventName
        • [...args]

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

      • 示例:

        只配合一个事件名使用 $emit

        Vue.component('welcome-button', {
          template: `
            <button v-on:click="$emit('welcome')">
              Click me to be welcomed
            </button>
          `
        })
        
        <div id="emit-example-simple">
          <welcome-button v-on:welcome="sayHi"></welcome-button>
        </div>
        
        new Vue({
          el: '#emit-example-simple',
          methods: {
            sayHi: function () {
              alert('Hi!')
            }
          }
        })
        

        {% raw %}

        {% endraw %}

        配合额外的参数使用 $emit

        Vue.component('magic-eight-ball', {
          data: function () {
            return {
              possibleAdvice: ['Yes', 'No', 'Maybe']
            }
          },
          methods: {
            giveAdvice: function () {
              var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
              this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
            }
          },
          template: `
            <button v-on:click="giveAdvice">
              Click me for advice
            </button>
          `
        })
        
        <div id="emit-example-argument">
          <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
        </div>
        
        new Vue({
          el: '#emit-example-argument',
          methods: {
            showAdvice: function (advice) {
              alert(advice)
            }
          }
        })
        

        {% raw %}

        {% endraw %}
      目录
      目录