mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-23 13:31:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: add on-update:value common issue

Browse Source
This commit is contained in:
07akioni 2021-09-28 00:41:36 +08:00
parent 3ddd40b0ee
commit d75b157b6f
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
demo/pages/docs/common-issues/enUS/index.md
View File

@ -2,7 +2,9 @@
## 1. The difference between @update:xxx and on-update:xxx
There is no difference between `@update:xxx` and `on-update:xxx` when used in templates.
### Case 1
If you are not using `v-model:xxx` with `on-update:xxx` on the same component, there is no difference between `@update:xxx` and `on-update:xxx` when used in templates.
In Naive UI, all API documents use the `on-update:xxx` format, because `@` is just a shorthand provided by Vue.
@ -10,4 +12,16 @@ If you prefer camelCase, you can use `onUpdate:xxx`.
If you are using JSX, you can use `onUpdateXxx` (all `onUpdate:xxx` have an equivalent implementation of `onUpdateXxx`).
### Case 2
If you are using `v-model:xxx`, you should use `@update:xxx` on the same component.
✅ example `<n-input v-model:value="xxx" @update:value="yyy" />`.
❌ example `<n-input v-model:value="xxx" :on-update:value="yyy" />`.
That is because `v-model:value="xxx"` will be transformed to `:onUpdate:value="xxx"`. If you are using `@update:value="yyy"` together, it will be `:onUpdate:value="[xxx, yyy]"`, and then Naive UI would take care of if.
However if you are using `on-update:value="yyy"`, Vue would generate code like `:onUpdate:value="xxx" :on-update-value="yyy"` and the second one would override the first one in Vue runtime. The `v-model:value` would be broken.
If you have any problem, feel free to create a PR or issue on GitHub.

16
demo/pages/docs/common-issues/zhCN/index.md
View File

@ -2,7 +2,9 @@
## 1. @update:xxx 和 on-update:xxx 的区别
`@update:xxx` 和 `on-update:xxx` 在模版中使用时没有任何区别。
### 情况 1
如果你没有在同一个组件上同时使用 `v-model:xxx` 和 `on-update:xxx`，`@update:xxx` 和 `on-update:xxx` 在模版中使用时没有任何区别。
在 Naive UI 中，全部的 API 文档使用 `on-update:xxx` 格式，因为 `@` 只是 Vue 提供的一种简写。
@ -10,4 +12,16 @@
如果你在使用 JSX，可以使用 `onUpdateXxx`（所有的 `onUpdate:xxx` 都有一个 `onUpdateXxx` 的对等实现）。
### 情况 2
如果你在一个组件上使用了 `v-model:xxx`，你应该使用 `@update:xxx`。
✅ 例子 `<n-input v-model:value="xxx" @update:value="yyy" />`。
❌ 例子 `<n-input v-model:value="xxx" :on-update:value="yyy" />`。
这是因为 `v-model:value="xxx"` 会被转化为 `:onUpdate:value="xxx"`。如果你同时使用了 `@update:value="yyy"`，他们会被转化为 `:onUpdate:value="[xxx, yyy]"`，然后 Naive UI 会来处理这种情况。
然是如果你使用了 `on-update:value="yyy"`，Vue 会生成类似于 `:onUpdate:value="xxx" :on-update-value="yyy"` 的代码，然后第二个属性会在运行时覆盖掉第一个，`v-model:value` 会崩掉。
如果你发现任何问题，欢迎在 GitHub 上提交 issue 和 PR。