Vue v-on : 클릭이 구성 요소에서 작동하지 않습니다
구성 요소 내에서 on click 지시문을 사용하려고하는데 작동하지 않는 것 같습니다. 구성 요소를 클릭해도 콘솔에서 '테스트 클릭'이 표시되면 아무 일도 일어나지 않습니다. 콘솔에 오류가 표시되지 않아서 내가 뭘 잘못하고 있는지 모르겠습니다.
index.html
<!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>
App.vue
<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>
Test.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 인스턴스와 분리하여 유지합니다.
<template>
<div id="app">
<test @click="$emit('test-click')></test>
</div>
</template>
HTML로 사용
<test @test-click="testFunction">
It's the @Neps' answer but with details.
Note: @Saurabh's answer is more suitable if you don't want to modify your component or don't have access to it.
Why can't @click just work?
Components are complicated. One component can be a small fancy button wrapper, and another one can be an entire table with bunch of logic inside. Vue doesn't know what exactly you expect when bind v-model or use v-on so all of that should be processed by component's creator.
How to handle click event
According to Vue docs, $emit passes events to parent. Example from docs:
Main file
<blog-post
@enlarge-text="onEnlargeText"
/>
Component
<button @click="$emit('enlarge-text')">
Enlarge text
</button>
(@ is the v-on shorthand)
Component handles native click event and emits parent's @enlarge-text="..."
enlarge-text can be replaced with click to make it look like we're handling a native click event:
<blog-post
@click="onEnlargeText"
></blog-post>
<button @click="$emit('click')">
Enlarge text
</button>
But that's not all. $emit allows to pass a specific value with an event. In the case of native click, the value is MouseEvent (JS event that has nothing to do with Vue).
Vue stores that event in a $event variable. So, it'd the best to emit $event with an event to create the impression of native event usage:
<button v-on:click="$emit('click', $event)">
Enlarge text
</button>
Native events of components aren't directly accessible from parent elements. Instead you should try v-on:click.native="testFunction", or you can emit an event from Test component as well. Like v-on:click="$emit('click')".
A bit verbose but this is how I do it:
@click="$emit('click', $event)"
참고URL : https://stackoverflow.com/questions/41475447/vue-v-onclick-does-not-work-on-component
'development' 카테고리의 다른 글
| "스크립트 실행"빌드 단계를 릴리스 구성으로 제한하려면 어떻게해야합니까? (0) | 2020.07.05 |
|---|---|
| 'git checkout'을 'git co'로 별칭 지정하는 방법 (0) | 2020.07.05 |
| Swift 4에서 #selector ()를 사용하여 @objc 추론 폐기를 처리하는 방법은 무엇입니까? (0) | 2020.07.04 |
| .NET 앱의 최대 스레드 수? (0) | 2020.07.04 |
| 오버로드 된 함수에 대한 포인터를 어떻게 지정합니까? (0) | 2020.07.04 |