VUE2 子组件传多个参数，父组件函数接收所有入参并加自定义参数

最新推荐文章于 2024-10-08 07:28:34 发布

I have a lemon

最新推荐文章于 2024-10-08 07:28:34 发布

阅读量614

点赞数 11

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/m0_37483148/article/details/140358712

版权

需求中有个场景是需要在子组件中传多个参数，让父组件接收所有入参，并且父组件也要加自己的参数

1.子组件传多个参数给父组件

子组件

// 子组件 ChildComponent.vue
<template>
  <button @click="sendDataToParent">传递数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const param1 = '参数1';
      const param2 = '参数2';
      this.$emit('send-data', param1, param2);
    }
  }
}
</script>

父组件

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent @send-data="handleDataFromChild"></ChildComponent>
  </div>
</template>

<script>
export default {
  methods: {
    handleDataFromChild(param1, param2) {
      console.log('参数1:', param1);
      console.log('参数2:', param2);
    }
  }
}
</script>

2.子组件传1个参数给父组件，并且父组件函数也传1个参数

子组件：

// 子组件 ChildComponent.vue
<template>
  <button @click="sendDataToParent">传递数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const param1 = '参数1';
      this.$emit('send-data', param1);
    }
  }
}
</script>

父组件：

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent @send-data="handleDataFromChild($event,'customParam')"></ChildComponent>
  </div>
</template>

<script>
export default {
  methods: {
    handleDataFromChild(param1, customParam) {
      console.log('参数1:', param1);
      console.log('自定义参数:', customParam);
    }
  }
}
</script>

3.子组件传2个参数给父组件，并且父组件函数也传1个参数

子组件

// 子组件 ChildComponent.vue
<template>
  <button @click="sendDataToParent">传递数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const param1 = '参数1';
      const param2 = '参数2';
      this.$emit('send-data', param1, param2);
    }
  }
}
</script>

父组件

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent @send-data="handleDataFromChild(arguments,'customParam')"></ChildComponent>
  </div>
</template>

<script>
export default {
  methods: {
    handleDataFromChild(chlidParams, customParam) {
      console.log('子组件中多个参数:', chlidParams);
      console.log('自定义参数:', customParam);
    }
  }
}
</script>