두 API의 세 가지 구성 요소 : 이벤트
소품 바운드 일방향 다운 링크 데이터를 한 항에있어서, 상기 부모 구성 요소 조립체 값 실현할 소품 통과 부모 컴포넌트 서브 어셈블리에 의해 필요한 값 또는 다른 통신 요청을 전달하는 경우에는 그 vue이벤트 모니터링 시스템 (트리거 이벤트 콜백 함수의 실행을 모니터링하고, 콜백 함수 질량 참가를 받아 들일 수있다).
Vue내장 이벤트의 완전한 세트는 논리를 트리거 :
v-on / @: 원래 HTML 요소는 기본 이벤트, 사용자 정의 이벤트 또는 하위 어셈블리를 수신.native: 루트 요소의 기본 이벤트 트리거 구성 요소$on: 자체는 트리거 이벤트 리스너 구성 요소$emit이벤트를 트리거 :$off: 제거 이벤트 리스너 구성 요소 자체$once: 한 번만 하나의 모니터, 이벤트 리스너, 더 이상 유효하지 그 후$listeners포함 : V-에 구성 요소 레이블에 등록 이벤트 리스너 함수에 대한 모든 사용자 정의 리스너 객체를, 키 이벤트의 이름, 값.
V-에 / @
이벤트 및 이벤트 수정 V-에, 그리고 DOM / JQUERY 이벤트 내 : 보려면 클릭하세요
그래서 부모 구성 요소 간 통신 얼굴 구성 요소를 달성하기 위해, 우리는 부모 컴포넌트의 수 v-on하위 컴포넌트 태그에 오픈 이벤트 리스너를 결합하고 내부 부성분 이용 $emit트리거 이벤트를.
<div id="app">
<p>this is event example for v-on/@<p>
<!-- 绑定监听事件some-event -->
<com-child @com-btn-click="handleChildClick"></com-child>
</div>const comChild = Vue.extend({
template: `<button @click="handleClick">我是子组件内定义的按钮，点击触发父级监听事件</button>`,
methods: {
handleClick() {
this.$emit('com-btn-click',666)
}
}
})
const vm = new Vue({
el: "#app",
components: {
comChild,
},
methods: {
handleChildClick(val) {
alert('我是由子组件触发的:' + val);
}
}
})이벤트 이름은 항상 케밥의 경우 양식을 사용하여
조립 및 소품 다를를, 이벤트 이름은 자바 스크립트 변수로 표시 또는 속성 이름, 그래서 어떤 자동 경우 변환이 존재하지 않습니다. 해당 이벤트는 이름으로 할 필요가 정확히이 이벤트를 수신하는 데 사용되는 이름과 일치 트리거.
V-에이 html 요소에 바인딩되지만 때문에 HTML은 대소 문자를 구분하지 않습니다. 일반 이벤트의 이름과 둘 이상의 단어를 기반으로, 이벤트의 이름을 모두 사용하는 것이 제안 kebab-case하이픈 양식을.
전달 이벤트 파라미터
조립체를 $emit트리거 이벤트 동안은 값으로 전달 될 수있는 v-on상기 수신 된 바인딩 이벤트 리스너.
// $emit第一个参数是监听器事件名，第二个是要传递的参数
this.$emit('some-event',666)// 监听事件处理函数第一个参数即为接收的值
handleChildEvent(val) {
alert('我是由子组件触发的:' + val)
}$on / $once
$on이벤트를 수신하고 열기 $emit이벤트 같은 구성 요소 인스턴스에 트리거에 들어요.
<div id="app">
<p>this is event example for $on<p>
<com-child></com-child>
</div>const comChild = Vue.extend({
template: `<button @click="handleClick">我是子组件内定义的按钮，点击触发监听事件</button>`,
data: () => {
return {
count: 0,
}
},
methods: {
handleClick() {
this.count++
this.$emit('comBtnClick',this.count)
}
},
mounted() {
this.$on('comBtnClick', (val) => {
alert('我是由$on注册的监听子组件按钮点击事件'+val)
if (val === 3) {
console.log('卸载事件监听')
this.$off('comBtnClick')
}
})
this.$once('comBtnClick', (val) => {
alert('我是由$once注册监听子组件按钮点击事件，只会触发一次'+val)
})
}
})
const vm = new Vue({
el: "#app",
components: {
comChild,
},
})조건에서 내부 구성 요소는와 시간의 이행을 감시하는 등의 이벤트를 트리거 $once하거나 이행을 감시하고 더 이상 사용을 듣고 특정 조건을 $on配合$off.
이 긴 경우는 동작의 구현을 트리거로서, 상기 방법에서 리스너 콜백 방법으로 기록 될 수 지속적인 모니터링이 인 경우에, 상기 방법은시 이벤트 직접적인 처리를 행한다.
const comChild = Vue.extend({
template: `<button @click="handleClick">我是子组件内定义的按钮，点击触发监听事件</button>`,
methods: {
handleClick() {
// this.$emit('comBtnClick',888)
this.comBtnClick(val)
},
comBtnClick(val) {
alert('我是按钮点击触发执行'+val)
}
},
})상기 사용 $on / $emit내부 부품만을 목적은 달성 될 수 없다 수행하고 통신 컴포넌트 조립체 상위 질량 값 경우. 이 시점에서 우리는와에 필요한 $refs속성 구현입니다.
ref한 특성에HTML기본 얻을 수의 요소DOM노드 객체 어셈블리에 사용되는 라벨의 목적은 구성 요소 인스턴스를 획득 할 수있다.
상기 변형 예에 따라, 사용하는 $on / $emit / $refs부모 요소 조립체 어셈블리 객체 인스턴스
<div id="app">
<p>this is event example for $on / $emit / $refs<p>
<com-child ref="comChild"></com-child>
</div>const comChild = Vue.extend({
template: `<div>
<button @click="handleBtnClick">我是子组件内定义的按钮，点击触发监听事件</button>
</div>`,
methods: {
handleBtnClick() {
this.$emit('comBtnClick',999)
},
},
})
const vm = new Vue({
el: "#app",
components: {
comChild,
},
mounted() {
this.$refs.comChild.$on('outerSelfEvent', val => {
console.log('组件按钮点击了')
})
this.$refs.comChild.$once('outerSelfEvent', val => {
console.log('组件按钮点击了,我只监听执行一次')
})
}
})오프 $
사용자 정의 이벤트 리스너를 제거합니다.
- 매개 변수가없는 경우, 모든 이벤트 리스너를 제거;
- 전용 이벤트 경우 모든 이벤트 리스너를 제거;
- 두 이벤트와 콜백 경우에만 (콜백 함수가 이벤트를 등록 할 때 익명 함수를 작성하는이 시간에 사용할 수 없습니다)이 리스너 콜백을 제거합니다.
<div id="app">
<p>this is event example for $off<p>
<com-child ref="comChild"></com-child>
</div>const comChild = Vue.extend({
template: `<div>
<button @click="handleBtnClick1">点击触发触发组件内部监听事件elert</button>
<button @click="handleBtnClick2">点击触发触发组件内部监听事件console</button>
<button @click="handleUninstallAllListener">点击卸载组件内所有事件监听$off()</button>
<button @click="handleUninstallTheEvent">点击卸载组件内指定事件监听器$off(event)</button>
<button @click="handleUninstallTheEventCallback">点击卸载组件内指定监听器$off(event,cb)</button>
</div>`,
methods: {
handleBtnClick1() {
this.$emit('handleAlert')
},
handleBtnClick2() {
this.$emit('handleConsole')
},
handleUninstallAllListener() {
console.log('卸载所有监听器')
this.$off()
},
handleUninstallTheEvent() {
console.log('卸载指定事件handleAlert的所有监听器')
this.$off('handleAlert')
},
handleUninstallTheEventCallback() {
console.log('卸载指定事件handleConsole中的handleConsole2监听器')
this.$off('handleConsole', this.handleConsole2)
},
handleConsole2() {
console.log('监听器Console2')
}
},
mounted() {
this.$on('handleAlert',function () {
alert('监听器alert1')
})
this.$on('handleAlert',function () {
alert('监听器alert2')
})
this.$on('handleConsole',function () {
console.log('监听器Console1')
})
this.$on('handleConsole',this.handleConsole2 )
}
})
const vm = new Vue({
el: "#app",
components: {
comChild,
},
})$ 리스너
모든 구성 요소 태그에 V-에 이벤트 리스너 부모 범위에 의해 등록이 포함되어 있습니다.
그러나 포함되지 않습니다 :
- 포함하는 .native 장식 네이티브 이벤트 리스너
- 구성 요소 등록 된 청취자에 $를 사용
다음 예, 우리는 하위 구성 요소 태그 네이티브 이벤트, 두 가지에 바인딩 v-on사용자 정의 이벤트 방식으로하는 $on사용자 지정 이벤트 방법.
그러나 마지막 $listeners두 가지 중 하나만 밖으로 인쇄 v-on방식을 결합 이벤트.
<div id="app">
<p>this is event example for $listeners<p>
<com-child
ref="comChild"
@click.native="handleNativeClick"
@child-btn-click-console="handelChildBtnClickConsole" @child-btn-click-alert="handelChildBtnClickAlert"
></com-child>
</div>const comChild = Vue.extend({
template: `<div>
<button @click="handleBtnClick" >点击触发触发组件内部监听事件elert</button>
</div>`,
methods: {
handleBtnClick() {
this.$emit('child-btn-click-alert')
this.$emit('child-btn-click-console')
this.$emit('handleConsole')
},
},
mounted() {
this.$on('handleConsole',function () {
console.log('$on绑定监听器')
})
// 打印出$listeners
console.log('$listeners:', this.$listeners)
}
})
const vm = new Vue({
el: "#app",
components: {
comChild,
},
methods: {
handelChildBtnClickAlert() {
alert('v-on绑定$emit触发alert')
},
handelChildBtnClickConsole() {
console.log("v-on绑定$emit触发console")
},
handleNativeClick() {
alert('native click')
}
}
})$listeners:
child-btn-click-alert: ƒ invoker()
child-btn-click-console: ƒ invoker()