Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

620
Visualizações
How can i execute a function of the child component sending a data?

i want to execute my function depends of the type, this function is in the child component, childComponent:

methods: {
      searchButton (type)  {
        console.log(type)
        if(type==='1'){}
        if(type==='2'){}
        if(type==='3'){}
      },
    },

i would like to this component like this

<Child @emit="seachButton('1')"

its possible?

Edit1: why the follow example does not work?

i am sending from the parent 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')
      },

and on my child component:

<template>
   <el-button @click="onClick" type="primary">{{ buttonText }}</el-button></template>

<script>
  export default {
    name: 'Child',
    props: {
      
    },
    methods: {
      onClick ()  {
        this.$emit('click')
      },
    },
  }
</script>
over 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

Just do want you want to do inside of your child.vue methods and use emit there too.

First: Do something in your if-statement and emit the value to your parent.vue:

methods: {
  searchButton (type)  {
    console.log(type)
    if(type==='1'){
      //just a e.g.
      this.value = type;
      this.$emit('myValue', this.value);
    }
    if(type==='2'){}
    if(type==='3'){}
   },
 },

Second: Define the emitted in your parent.vue

<Child @myValue="myValue"/>

Third: Reference second step and set a new variable in your parent.vue methods like this:

methods: {
  newValue(val) {                //val = your emitted value
    this.valueFromChild = val    //define your val in your parent.vue
  }
}

Hopefully this helps you out!

Just for additional info:

EMIT is to pass data from your child to your parent and will be declared like my e.g in step 2 (@example="example)

PROPS is to pass data from parent to child, these will declared in the component-tag like :example="example"

UPDATE TO NEW EDIT:

In your child.vue (!) template you have to define a click-event first when you want to do it after clicking on a button like in my code. Than go to your methods and define a function for each and emit this with a name and a 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>

In you parent.vue (!) you have to declare but where you add your component than you go to your methods as well like in my code and declare your variable, than you can use it in your parent! Like this

<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>
over 4 years ago · Santiago Trujillo Relatório

0

An easier way would be using a ref like

<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>

and your child component be like

<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>
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda