How can i execute a function of the child component sending a data?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>