• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • $emit

    参数:

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

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


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

    //HTML
    <div id="emit-example-simple">
    	<welcome-button v-on:welcome="sayHi"></welcome-button>
    </div>
    
    //JS
    const app = Vue.createApp({
    	methods: {
    		sayHi() {
    			console.log('Hi!')
    		}
    	}
    })
    
    app.component('welcome-button', {
    	template: `
    	<button v-on:click="$emit('welcome')">
    		Click me to be welcomed
    	</button>
    	`
    })
    
    app.mount('#emit-example-simple')
    

    配合额外的参数使用$emit

    //HTML
    <div id="emit-example-argument">
    	<advice-component v-on:give-advice="showAdvice"></advice-component>
    </div>
    
    
    //JS
    const app = Vue.createApp({
      methods: {
        showAdvice(advice) {
          alert(advice)
        }
      }
    })
    
    app.component('advice-component', {
      data() {
        return {
          adviceText: 'Some advice'
        }
      },
      template: `
        <div>
          <input type="text" v-model="adviceText">
          <button v-on:click="$emit('give-advice', adviceText)">
            Click me for sending advice
          </button>
        </div>
      `
    })
    

    上篇:$el

    下篇:$forceUpdate