On the naming of vue Custom events

Today I encountered a very strange problem with vue:
I. sync bound a prop: : is-amazon.sync= "isAmazon" ,
then passed a value to the parent component with $emit in the child component: this.$emit ("update:is-amazon",val) ,
found that the isAmazon in the parent component had not changed.

so I changed my name: isamazon.sync= "isAmazon"; this.$emit ("update:isamazon",val) ,
and then succeeded.
this puzzles me, because the vue document says that it is recommended to use kebab-case to monitor custom events. As a result, kebab-case does not work here.

Apr.06,2022

prop::is-amazon.sync= "isAmazon",
this.$emit ('update:is-amazon',val),

this.$emit ('update:isAmazon',val) is changed to this


 prop "" 


 update:myPropName 

ide/components-custom-events.html-sharpsync-%E4%BF%AE%E9%A5%B0%E7%AC%A6" rel=" nofollow noreferrer "> .sync modifier

camelCased is officially recommended here, but I don't quite understand this paragraph. I hope someone can analyze it

.

Custom events use kebab-case , and custom properties use camelCased


if you use the sync modifier, vue should be uniformly converted to hump naming, that is,
vPayonkebab-case updateisAmazon = "isAmazon= $event"
because camelCased is used when vue passes values, and kebab-case
is used for custom events. Your this.$emit ('update:is-amazon',val) doesn't work. The correct way to write
is to use the hump name
isAmazon.sync= "isAmazon". This.$emit ('update:isAmazon',val)

Menu