quiero ejecutar mi función depende del tipo, esta función está en el componente secundario, childComponent:
methods: { searchButton (type) { console.log(type) if(type==='1'){} if(type==='2'){} if(type==='3'){} }, },me gustaria este componente asi
<Child @emit="seachButton('1')"¿Es posible?
Edit1: ¿por qué el siguiente ejemplo no funciona?
estoy enviando desde el padre Parent.vue
<Child @onClick="onClick1"/> <Child @onClick="onClick2"/> <script> import Child from './Child.vue' export default { name: 'Tabs', props: {}, components: { Child, }, methods: { onClick1() { console.log('onClick1') }, onClick2() { console.log('onClick2') },y en mi componente hijo:
<template> <el-button @click="onClick" type="primary">{{ buttonText }}</el-button></template> <script> export default { name: 'Child', props: { }, methods: { onClick () { this.$emit('click') }, }, } </script>Solo quiero que quieras hacer dentro de tus methods child.vue y usa emit allí también.
Primero: haga algo en su if-statement y emit el valor a su parent.vue:
methods: { searchButton (type) { console.log(type) if(type==='1'){ //just a eg this.value = type; this.$emit('myValue', this.value); } if(type==='2'){} if(type==='3'){} }, }, Segundo: Defina el emitted en su parent.vue
<Child @myValue="myValue"/> Tercero: haga referencia al segundo paso y establezca una nueva variable en sus methods parent.vue como este:
methods: { newValue(val) { //val = your emitted value this.valueFromChild = val //define your val in your parent.vue } }¡Espero que esto te ayude!
Solo para información adicional:
EMIT es para pasar datos de su hijo a su padre y se declarará como mi, por ejemplo, en el paso 2 (@example="example)
PROPS es pasar datos de padre a hijo, estos se declararán en la component-tag como: ejemplo = "ejemplo"
ACTUALIZAR A NUEVA EDICIÓN :
En su template child.vue (!), Primero debe definir un click-event cuando desee hacerlo después de hacer clic en un botón como en mi código. ¡Entonces vaya a sus methods y defina una function para cada uno y emit esto con un name y un value !
<template> <el-button type="primary" @click="triggerClick1()">{{ buttonText }}</el-button> <el-button type="primary" @click="triggerClick2()">{{ buttonText }}</el-button> </template> <script> export default { name: 'Child', methods: { triggerClick1() { this.$emit('onClick1', "First button was triggerd") } triggerClick2() { this.$emit('onClick2', "Second button was triggerd") } }, } </script> En tu padre.vue (!) Tienes que declarar, pero cuando agregas tu component , vas a tus métodos, como en mi código y declaras tu variable, ¡entonces puedes usarla en tu padre! Me gusta esto
<template> <Child @onClick1="onClick1" @onClick1="onClick2"/> </template> <script> import Child from './Child.vue' export default { name: 'Tabs', props: {}, components: { Child, }, methods: { onClick1(val) { this.valClick1 = val; }, onClick2(val) { this.valClick2 = val; } } </script>Una forma más fácil sería usar una ref como
<template> <Child @child-click="searchButton" ref="child_ref"/> </template> <script> export default { name: 'Parent', methods: { searchButton (type) { console.log(type) if(type==='1'){ this.$refs.child_ref.handler1(); // can pass args if required } if(type==='2'){ this.$refs.child_ref.handler1(); // can pass args if required } }, } } </script>y su componente hijo sea como
<template> <el-button @click="onClick" type="primary">{{ buttonText }}</el-button></template> <script> export default { name: 'Child', methods: { onClick () { let someVal = 1 // can you any value that is used in if-else inside parent this.$emit('child-click', someVal) // changed the name becoz there is already a default handler called 'click` }, handler1() { }, handler2() { } }, } </script>