Vue.js 이벤트 바인딩 - 내장 이벤트 바인딩, 사용자 정의 이벤트 바인딩

이번에는 Vue.js의 이벤트바인딩 - 내장 이벤트 바인딩, 커스텀 이벤트 바인딩, Vue.js를 사용한 이벤트 바인딩 - 내장 이벤트 바인딩, 커스텀 이벤트 바인딩주의 사항이 무엇인가요? 실제 사례는 다음과 같습니다. 살펴보겠습니다.

<button v-on:click="toggle">切换</button>

는

<button @click="toggle">切换</button>

내장 이벤트 바인딩

버블링 이벤트 방지

<button @click.stop="toggle">切换</button>

일반적으로 사용되는 이벤트Modifier:keydown

@keydown 입력 상자 입력 내용 또는 내용 변경 시 실행이 트리거됩니다.

<input type="text" @keydown="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>

Pass 지정 키보드 Enter를 눌렀을 때 실행을 실행하는 수정자 @keydown.13도 사용할 수 있습니다.

<input @keydown.enter="onkeydown">//这两个效果一样<input @keydown.13="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>

사용자 정의 이벤트 바인딩

사용자 정의 이벤트 바인딩이 일반적으로 사용됩니다. in 커스텀 컴포넌트 a.vue에서 코드는 다음과 같습니다

<template>
  <div class="hello">
    {{ hello }}    <button @click="emitMyEvent">emit</button>
  </div></template><script>
  export default {
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    },    methods: {
      emitMyEvent () {//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit(&#39;my-event&#39;, this.hello)
      }
    }
  }</script>

호출된 컴포넌트에서

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},    methods: {//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {        console.log(parmfromA)
      }
    }
  }</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 항목을 주목하시기 바랍니다. PHP 중국어 웹사이트의 기사!

추천 자료:

Vue.js에서 목록 데이터의 동기 업데이트 방법

Vue.js의 목록 렌더링 v-for 배열 객체 하위 구성 요소

Vue.js의 텍스트 렌더링

Vue.js

사용 시 주의사항은 무엇인가요?

위 내용은 Vue.js 이벤트 바인딩 - 내장 이벤트 바인딩, 사용자 정의 이벤트 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!