Vue v-on: hacer clic no funciona en el componente
Estoy intentando utilizar la directiva al hacer clic dentro de un componente pero no parece funcionar. Cuando hago clic en el componente, no sucede nada cuando debería hacer clic en una prueba en la consola. No veo ningún error en la consola, así que no sé qué estoy haciendo mal.
índice.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>
aplicación.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 (el componente)
<template>
<div>
click here
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Si desea escuchar un evento nativo en el elemento raíz de un componente, debe usar el modificador .nativev-on para , como se muestra a continuación:
<template>
<div id="app">
<test v-on:click.native="testFunction"></test>
</div>
</template>
o en resumen, como se sugiere en el comentario, también puedes hacer:
<template>
<div id="app">
<test @click.native="testFunction"></test>
</div>
</template>
Referencia para leer más sobre el evento nativo
Creo que la $emitfunción funciona mejor para lo que creo que estás pidiendo. Mantiene su componente separado de la instancia de Vue para que sea reutilizable en muchos contextos.
<!-- Child component -->
<template>
<div id="app">
<test @click="$emit('test-click')"></test>
</div>
</template>
Úselo en HTML:
<!-- Parent component -->
<test @test-click="testFunction">
