uTools-Manuals/docs/vue/实例方法-事件.html

<h2 id="实例方法-事件"><a href="#实例方法-事件" class="headerlink" title="实例方法 / 事件" data-scroll="">实例方法 / 事件</a></h2><h3 id="vm-on"><a href="#vm-on" class="headerlink" title="vm.$on( event, callback )" data-scroll="">vm.$on( event, callback )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string | Array&lt;string&gt;} event</code> (数组只在 2.2.0+ 中支持)</li>
<li><code>{Function} callback</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>监听当前实例上的自定义事件。事件可以由<code>vm.$emit</code>触发。回调函数会接收所有传入事件触发函数的额外参数。</p>
</li>
<li><p><strong>示例</strong>：</p>
<pre><code class="hljs js">vm.$on(<span class="hljs-string">'test'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">msg</span>) </span>{
  <span class="hljs-built_in">console</span>.log(msg)
})
vm.$emit(<span class="hljs-string">'test'</span>, <span class="hljs-string">'hi'</span>)
<span class="hljs-comment">// =&gt; "hi"</span></code></pre>
</li>
</ul>
<h3 id="vm-once"><a href="#vm-once" class="headerlink" title="vm.$once( event, callback )" data-scroll="">vm.$once( event, callback )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} event</code></li>
<li><code>{Function} callback</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。</p>
</li>
</ul>
<h3 id="vm-off"><a href="#vm-off" class="headerlink" title="vm.$off( [event, callback] )" data-scroll="">vm.$off( [event, callback] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string | Array&lt;string&gt;} event</code> (只在 2.2.2+ 支持数组)</li>
<li><code>{Function} [callback]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>移除自定义事件监听器。</p>
<ul>
<li><p>如果没有提供参数，则移除所有的事件监听器；</p>
</li>
<li><p>如果只提供了事件，则移除该事件所有的监听器；</p>
</li>
<li><p>如果同时提供了事件与回调，则只移除这个回调的监听器。</p>
</li>
</ul>
</li>
</ul>
<h3 id="vm-emit"><a href="#vm-emit" class="headerlink" title="vm.$emit( eventName, […args] )" data-scroll="">vm.$emit( eventName, […args] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} eventName</code></li>
<li><code>[...args]</code></li>
</ul>
<p>触发当前实例上的事件。附加参数都会传给监听器回调。</p>
</li>
<li><p><strong>示例：</strong></p>
<p>只配合一个事件名使用 <code>$emit</code>：</p>
<pre><code class="hljs js">Vue.component(<span class="hljs-string">'welcome-button'</span>, {
  <span class="hljs-attr">template</span>: <span class="hljs-string">`
    &lt;button v-on:click="$emit('welcome')"&gt;
      Click me to be welcomed
    &lt;/button&gt;
  `</span>
})</code></pre>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"emit-example-simple"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">welcome-button</span> <span class="hljs-attr">v-on:welcome</span>=<span class="hljs-string">"sayHi"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">welcome-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#emit-example-simple'</span>,
  <span class="hljs-attr">methods</span>: {
    <span class="hljs-attr">sayHi</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      alert(<span class="hljs-string">'Hi!'</span>)
    }
  }
})</code></pre>

  <div id="emit-example-simple" class="demo"><button>
          Click me to be welcomed
        </button></div>
  <script>
    Vue.component('welcome-button', {
      template: `
        <button v-on:click="$emit('welcome')">
          Click me to be welcomed
        </button>
      `
    })
    new Vue({
      el: '#emit-example-simple',
      methods: {
        sayHi: function () {
          alert('Hi!')
        }
      }
    })
  </script>
  
<p>配合额外的参数使用 <code>$emit</code>：</p>
<pre><code class="hljs js">Vue.component(<span class="hljs-string">'magic-eight-ball'</span>, {
  <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">possibleAdvice</span>: [<span class="hljs-string">'Yes'</span>, <span class="hljs-string">'No'</span>, <span class="hljs-string">'Maybe'</span>]
    }
  },
  <span class="hljs-attr">methods</span>: {
    <span class="hljs-attr">giveAdvice</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">var</span> randomAdviceIndex = <span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-keyword">this</span>.possibleAdvice.length)
      <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'give-advice'</span>, <span class="hljs-keyword">this</span>.possibleAdvice[randomAdviceIndex])
    }
  },
  <span class="hljs-attr">template</span>: <span class="hljs-string">`
    &lt;button v-on:click="giveAdvice"&gt;
      Click me for advice
    &lt;/button&gt;
  `</span>
})</code></pre>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"emit-example-argument"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">magic-eight-ball</span> <span class="hljs-attr">v-on:give-advice</span>=<span class="hljs-string">"showAdvice"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">magic-eight-ball</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#emit-example-argument'</span>,
  <span class="hljs-attr">methods</span>: {
    <span class="hljs-attr">showAdvice</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">advice</span>) </span>{
      alert(advice)
    }
  }
})</code></pre>

  <div id="emit-example-argument" class="demo"><button>
          Click me for advice
        </button></div>
  <script>
    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>
      `
    })
    new Vue({
      el: '#emit-example-argument',
      methods: {
        showAdvice: function (advice) {
          alert(advice)
        }
      }
    })
  </script>
  
</li>
</ul>