如何执行子组件发送数据的功能？

Question

我想根据类型执行我的功能，这个功能在子组件中，子组件：

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

我想要这样的组件

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

可能吗？

Edit1：为什么下面的例子不起作用？

我是家长发来的 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')
      },

在我的子组件上：

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

<script>
  export default {
    name: 'Child',
    props: {
      
    },
    methods: {
      onClick ()  {
        this.$emit('click')
      },
    },
  }
</script>

Answer 1

只要你想在你的 child.vue methods 里面做，并且在那里也使用 emit。

首先： 在你的 if-statement 和 emit 中做一些事情 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'){}
   },
 },

其次：在你的parent.vue

中定义emitted

<Child @myValue="myValue"/>

第三步：参考第二步，在你的parent.vuemethods中设置一个新变量，像这样：

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

希望这对您有所帮助！

补充信息：

EMIT 是将数据从您的 child 传递到您的 parent 并将像我在第 2 步中的示例一样声明 (@example="example)

PROPS 是将数据从 parent 传递到 child，这些将在 component-tag 中声明，如 :example="example"

更新为新编辑：

在您的 child.vue (!) template 中，您必须先定义一个 click-event 才能在单击我的代码中的按钮后执行此操作。比去你的 methods 并为每个定义一个 function 和 emit 这个 name 和 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>

在你 parent.vue (!) 你必须声明但是你添加你的 component 比你去你的方法以及在我的代码中声明你的变量，比你可以使用它在你的 parent 中！像这样

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

Answer 2

更简单的方法是使用 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>

你的子组件就像

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

如何执行子组件发送数据的功能？

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

vue.js

vuejs3