fix(vue): nav component accepts kebab-case component properties (#28615)

Issue number: resolves #28611

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
It's not possible to pass props that are not camelCase to the `IonNav`
component.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- It is now possible to set a props with kebab-case instead of camelCase
(for example, `root-params` instead of `rootParams`)

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
⚠️ This is my first PR for ionic so I hope I didn't miss important steps
into the process. I also checked on my project that the fix is working
well. Thank you! 🙂

---------

Co-authored-by: Sean Perkins <sean@ionic.io>
This commit is contained in:
Éric Le Maître
2023-12-01 16:30:13 +01:00
committed by GitHub
parent a3cd204f61
commit 60303aad23
4 changed files with 66 additions and 38 deletions

View File

@@ -1,16 +1,12 @@
<template>
<ion-nav :root="NavRoot"></ion-nav>
<ion-nav :root="NavRoot" :root-params="rootParams"></ion-nav>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { IonNav } from '@ionic/vue';
import NavRoot from '@/components/NavRoot.vue';
<script setup lang="ts">
import { IonNav } from "@ionic/vue";
import NavRoot from "@/components/NavRoot.vue";
export default defineComponent({
components: { IonNav },
setup() {
return { NavRoot }
}
});
const rootParams = {
message: "Hello World!",
};
</script>