IT이야기

Vue v-On:클릭이 구성 요소에서 작동하지 않음

cyworld 2022. 3. 13. 10:32
반응형

Vue v-On:클릭이 구성 요소에서 작동하지 않음

컴포넌트 내부에서 클릭 명령을 사용하려고 하는데 작동하지 않는 것 같아.구성 요소를 클릭하면 콘솔에서 '테스트 클릭'을 받아야 할 때 알림이 발생한다.콘솔에 오류가 보이지 않아서 내가 뭘 잘못하고 있는지 모르겠어.

인덱스.포인트

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuetest</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

앱뷰

<template>
  <div id="app">
    <test v-on:click="testFunction"></test>
  </div>
</template>

<script>
import Test from './components/Test'

export default {
  name: 'app',
  methods: {
    testFunction: function (event) {
      console.log('test clicked')
    }
  },
  components: {
    Test
  }
}
</script>

테스트.vue(구성 요소)

<template>
  <div>
    click here
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

구성 요소의 루트 요소에서 네이티브 이벤트를 청취하려면 .native 수식어를 사용해야 한다.v-on, 다음과 같은 경우:

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

코멘트에서 제시된 바와 같이 속기로 다음과 같이 할 수 있다.

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

기본 이벤트에 대한 자세한 내용을 보려면 참조

내 생각에$emit기지는 할 수 Vue 인스턴스에서 구성 요소를 분리하여 여러 컨텍스트에서 재사용할 수 있도록 한다.

// Child component
<template>
  <div id="app">
    <test @click="$emit('test-click')"></test>
  </div>
</template>

HTML에서 사용

// Parent component
<test @test-click="testFunction">

@Neps의 대답이지만 자세한 것은.

참고: @Saurabh의 대답은 구성 요소를 수정하지 않거나 액세스할 수 없는 경우에 더 적합하다.

@click은 왜 그냥 작동하지 않는 걸까?

부품이 복잡하다.한 구성 요소는 작은 화려한 단추 포장지가 될 수 있고, 또 다른 구성 요소는 안에 논리 뭉치가 있는 테이블 전체가 될 수 있다.Vue는 당신이 바인딩할 때 정확히 무엇을 기대하는지 모른다.v-model또는 사용v-on따라서 이 모든 것은 컴포넌트의 제작자가 처리해야 한다.

클릭 이벤트 처리 방법

Vue 문서들에 따르면,$emit이벤트를 부모에게 전달한다.문서의 예:

메인 파일

<blog-post
  @enlarge-text="onEnlargeText"
/>

구성 요소

<button @click="$emit('enlarge-text')">
  Enlarge text
</button>

(@이다v-on 속기)

기본 구성 요소 핸들click이벤트 및 부모님의 이벤트 발생@enlarge-text="..."

enlarge-text으로 대체될 수 있다.click네이티브 클릭 이벤트를 처리하는 것처럼 보이게 하기 위해:

<blog-post
  @click="onEnlargeText"
></blog-post>

<button @click="$emit('click')">
  Enlarge text
</button>

하지만 그게 전부는 아니다. $emit특정 값을 이벤트와 함께 전달하도록 허용한다.토착민의 경우click값은 MouseEvent(Vue와는 상관없는 JS 이벤트)이다.

Vue는 그 이벤트를 다음과 같이 저장한다.$event가변의그래서, 그게 제일 좋은 거 같아.$event기본 이벤트 사용의 인상을 심어주는 이벤트 포함:

<button v-on:click="$emit('click', $event)">
  Enlarge text
</button>

Chris Fritz(Vue.js Core Team Emeriti)가 VueCONF US 2019에서 언급한 바와 같이

만약 우리가 기아차를 출입시켰다면.native그리고 나서 베이스 입력의 루트 요소가 입력에서 라벨로 갑자기 바뀌었고, 그것은 명백하지 않으며, 사실, 당신은 정말 좋은 테스트를 받지 않는 한 그것을 바로 잡을 수 없을지도 모른다.대신 사용법을 피함으로써.native내가 현재 안티패턴이라고 생각하고 있는 수식어, Vue 3에서 삭제될 예정인데, 부모들이 어떤 요소 청취자가...에 추가되는지에 대해 관심을 가질 수 있다는 것을 명시적으로 정의할 수 있을 것이다.

Vue 2와 함께

사용.$listeners:

따라서 Vue 2를 사용하는 경우 이 문제를 해결하는 더 나은 옵션은 완전히 투명한 래퍼 논리를 사용하는 것이다.이를 위해 Vue는$listeners구성 요소에 사용되는 수신기 객체를 포함하는 속성.예를 들면 다음과 같다.

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

그리고 나서 우리는 단지 덧붙이자면v-on="$listeners"에게test구성 요소:

테스트.vue(하위 구성 요소)

<template>
  <div v-on="$listeners">
    click here
  </div>
</template>

이제 더<test>구성요소는 완전히 투명한 포장지로서, 일반 포장지처럼 정확히 사용될 수 있다.<div>원소: 모든 청취자가 작업할 것이며,.native수식어

데모:

Vue.component('test', {
  template: `
    <div class="child" v-on="$listeners">
      Click here
    </div>`
})

new Vue({
  el: "#myApp",
  data: {},
  methods: {
    testFunction: function(event) {
      console.log('test clicked')
    }
  }
})
div.child{border:5px dotted orange; padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <test @click="testFunction"></test>
</div>

방법 사용:

우리는 또한 그것을 사용할 수 있다.$emit이러한 목적을 위한 방법. 부모 구성 요소에서 자식 구성 요소의 이벤트를 청취하는 데 도움이 된다.이를 위해 먼저 다음과 같은 하위 구성 요소에서 사용자 지정 이벤트를 내보내야 한다.

테스트.vue(하위 구성 요소)

<test @click="$emit('my-event')"></test>

중요:이벤트 이름에는 항상 케밥 케이스를 사용하십시오.이 점에 대한 자세한 내용과 데모를 보려면 다음 답변을 참조하십시오.VueJS는 계산된 값을 구성 요소에서 상위 항목으로 전달한다.

이제 우리는 부모 구성 요소에서 다음과 같은 방출된 사용자 지정 이벤트를 들어보면 된다.

앱뷰

<test @my-event="testFunction"></test>

그래서 기본적으로, 대신에v-on:click는 속기이다.@click우리는 간단히 사용할 것이다.v-on:my-event아니면 그냥@my-event.

데모:

Vue.component('test', {
  template: `
    <div class="child" @click="$emit('my-event')">
      Click here
    </div>`
})

new Vue({
  el: "#myApp",
  data: {},
  methods: {
    testFunction: function(event) {
      console.log('test clicked')
    }
  }
})
div.child{border:5px dotted orange; padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <test @my-event="testFunction"></test>
</div>

Vue 3과 함께

사용.v-bind="$attrs":

Vue 3는 많은 면에서 우리의 삶을 훨씬 더 쉽게 만들어 줄 것이다.한 가지 예는, 우리가 단지 사용함으로써 적은 구성으로 더 단순한 투명 포장지를 만드는 데 도움이 될 것이라는 것이다.v-bind="$attrs"이것을 아동 구성요소에 사용함으로써, 우리의 청취자가 부모로부터 직접 작동할 뿐만 아니라, 다른 속성들도 정상과 같은 방식으로 작동할 것이다.<div>.

따라서 이 문제와 관련하여, 우리는 Vue 3에서 어떤 것도 업데이트할 필요가 없을 것이며 당신의 코드는 여전히 잘 작동할 것이다.<div>여기 루트 요소가 있고 모든 아동 이벤트를 자동으로 청취할 것이다.

데모 #1:

const { createApp } = Vue;

const Test = {
  template: `
    <div class="child">
      Click here
    </div>`
};

const App = {
  components: { Test },
  setup() {
    const testFunction = event => {
      console.log("test clicked");
    };
    return { testFunction };
  }
};

createApp(App).mount("#myApp");
div.child{border:5px dotted orange; padding:20px;}
<script src="//unpkg.com/vue@next"></script>
<div id="myApp">
  <test v-on:click="testFunction"></test>
</div>

그러나 내포된 요소가 있는 복합 구성요소의 경우, 특성 및 이벤트를 에 적용해야 한다.<input />우리가 간단히 사용할 수 있는 부모 레이블 대신v-bind="$attrs"

데모 #2:

const { createApp } = Vue;

const BaseInput = {
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input v-bind="$attrs">
    </label>`
};

const App = {
  components: { BaseInput },
  setup() {
    const search = event => {
      console.clear();
      console.log("Searching...", event.target.value);
    };
    return { search };
  }
};

createApp(App).mount("#myApp");
input{padding:8px;}
<script src="//unpkg.com/vue@next"></script>
<div id="myApp">
  <base-input 
    label="Search: "
    placeholder="Search"
    @keyup="search">
  </base-input><br/>
</div>

좀 장황하지만 이렇게 하면 된다.

@click="$emit('click', $event)"

UPDATE: @sparkyspider에 의해 추가된 예

<div-container @click="doSomething"></div-container>

인div-container구성 요소...

<template>
  <div @click="$emit('click', $event);">The inner div</div>
</template>

구성요소의 기본 이벤트는 상위 요소에서 직접 액세스할 수 없다.대신 너는 노력해야 한다.v-on:click.native="testFunction"또는 다음에서 이벤트를 내보낼 수 있음Test구성 요소도.맘에 들다v-on:click="$emit('click')".

한 가지 사용 사례@click.native사용자 지정 구성 요소를 생성하고 사용자 지정 구성 요소에서 클릭 이벤트를 수신할 때 입니다.예를 들면 다음과 같다.

#CustomComponent.vue
<div>
  <span>This is a custom component</span>
</div>

#App.vue
<custom-component @click.native="onClick"></custom-component>

@click.native항상 이 상황을 위해 일한다.

설명서:

JavaScript의 제한으로 인해 Vue는 어레이에 대한 다음과 같은 변경 사항을 감지할 수 없다.

  1. 인덱스로 항목을 직접 설정할 경우(예: vm.items[indexOfItem] = newValue
  2. 어레이의 길이를 수정할 때(예: vm.items.length = newLength)

내 경우 나는 Angul에서 VUE로 이주할 때 이 문제를 우연히 발견했다.픽스는 꽤 쉬웠지만, 정말 찾기 어려웠다.

setValue(index) {
    Vue.set(this.arr, index, !this.arr[index]);
    this.$forceUpdate(); // Needed to force view rerendering
}

앱뷰

<div id="app">
    <test @itemClicked="testFunction($event)"/>
</div>

시험.vue

<div @click="$emit('itemClicked', data)">
     click here
</div>

참조URL: https://stackoverflow.com/questions/41475447/vue-v-onclick-does-not-work-on-component

반응형

'IT이야기' 카테고리의 다른 글

어떻게 분단을 부동의 지점으로 강제할 수 있을까?0으로 반올림하는 중인가?  (0) 2022.03.13
개츠비의 소방 기지를 어떻게 초기화할까?  (0) 2022.03.13
가상 환경 제거/삭제 방법  (0) 2022.03.13
VueJS 데이터()가 작동하지 않음  (0) 2022.03.13
각도2 rxjs 관측 가능한 포크조인  (0) 2022.03.13

'IT이야기'의 다른글

  • 현재글Vue v-On:클릭이 구성 요소에서 작동하지 않음

관련글

댓글

티스토리툴바