提交 87b173a9 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

docs: refs

上级 307df26d
...@@ -153,7 +153,7 @@ const app = createApp({}) ...@@ -153,7 +153,7 @@ const app = createApp({})
|$parent |父实例,如果当前实例有的话。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#parent) |√ |√ | √ |H5端 `view``text` 等内置标签是以 `Vue` 组件方式实现,`$parent` 会获取这些到内置组件,导致的问题是 `this.$parent` 与其他平台不一致,解决方式是使用 `this.$parent.$parent` 获取或自定义组件根节点由 `view` 改为 `div`| |$parent |父实例,如果当前实例有的话。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#parent) |√ |√ | √ |H5端 `view``text` 等内置标签是以 `Vue` 组件方式实现,`$parent` 会获取这些到内置组件,导致的问题是 `this.$parent` 与其他平台不一致,解决方式是使用 `this.$parent.$parent` 获取或自定义组件根节点由 `view` 改为 `div`|
|$root |当前组件树的根组件实例。如果当前实例没有父实例,此实例将会是其自己。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#root) |√ |√ | √ || |$root |当前组件树的根组件实例。如果当前实例没有父实例,此实例将会是其自己。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#root) |√ |√ | √ ||
|$slots |用来访问被插槽分发的内容。每个具名插槽有其相应的 `property` (例如:`v-slot:foo` 中的内容将会在 `this.$slots.foo` 中被找到)。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#slots) |√ |x | √ || |$slots |用来访问被插槽分发的内容。每个具名插槽有其相应的 `property` (例如:`v-slot:foo` 中的内容将会在 `this.$slots.foo` 中被找到)。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#slots) |√ |x | √ ||
|$refs |一个对象,持有注册过 `ref attribute` 的所有 `DOM` 元素和组件实例。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#refs) |√ |√ | √|非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:`view``text`)| |$refs |一个对象,持有注册过 `ref attribute` 的所有 `DOM` 元素和组件实例。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#refs) |√ |√ | √|非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:`view``text``uni-app x` 内置组件绑定 `ref` 会返回组件根节点的引用。|
|$attrs |包含了父作用域中不作为组件 `props` 或自定义事件。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#attrs) |√ |√ | x |-| |$attrs |包含了父作用域中不作为组件 `props` 或自定义事件。[详情](https://v3.cn.vuejs.org/api/instance-properties.html#attrs) |√ |√ | x |-|
......
...@@ -110,8 +110,12 @@ export default { ...@@ -110,8 +110,12 @@ export default {
## refs ## refs
`uni-app js 引擎版`中,`refs` 的类型是 `Object``DOM 节点`的类型是 `Element`\ `uni-app js 引擎版`中,`refs` 的类型是 `Object`,非 `H5端` 只能用于获取自定义组件,不能用于获取内置组件实例(如:`view``text`)。\
`uni-app x` 中,`refs` 的类型是 `Map<string, any>``DOM 节点`的类型是 `INode` `uni-app x` 中,`refs` 的类型是 `Map<string, any>`,内置组件会返回组件根节点的引用,自定义组件会返回组件实例。
**注意事项:**
- 如果多个节点或自定义组件绑定相同 `ref` 属性,将获取到最后一个节点或组件实例的引用。
-`v-for` 循环时,绑定 `ref` 属性会获取到节点或组件实例的集合。
::: preview ::: preview
...@@ -130,7 +134,7 @@ export default { ...@@ -130,7 +134,7 @@ export default {
export default { export default {
onReady() { onReady() {
const text = this.$refs.text as Element const text = this.$refs.text as Element // 仅H5端支持
const foo = this.$refs.foo as ComponentPublicInstance const foo = this.$refs.foo as ComponentPublicInstance
} }
} }
...@@ -152,7 +156,7 @@ export default { ...@@ -152,7 +156,7 @@ export default {
export default { export default {
onReady() { onReady() {
const text = this.$refs.get("text") as INode const text = this.$refs.get("text") as Element
const foo = this.$refs.get("foo") as ComponentPublicInstance const foo = this.$refs.get("foo") as ComponentPublicInstance
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册