Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
m0_68066342
uni-app
提交
d3b1b76e
U
uni-app
项目概览
m0_68066342
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
d3b1b76e
编写于
3月 30, 2021
作者:
study夏羽
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
vue 新增ref
上级
350f64e0
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
107 addition
and
0 deletion
+107
-0
docs/vue-components.md
docs/vue-components.md
+107
-0
未找到文件。
docs/vue-components.md
浏览文件 @
d3b1b76e
...
...
@@ -358,6 +358,113 @@
## ref
被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的
`$refs`
对象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
```
html
//非H5端不支持通过this.$refs.content来获取view实例
<view
ref=
"content"
>
hello
</view>
//支持通过this.$refs.child来获取child-component实例
<child-component
ref=
"child"
></child-component>
```
当
`ref`
和
`v-for`
一起用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
**关于 ref 注册时间的重要说明:**
因为
`ref`
本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们,它们还不存在!
`$refs`
也不是响应式的,因此你不应该用它在模板中做数据绑定。
#### 子组件ref
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。
访问子组件实例或子元素,通过 ref 为子组件赋予一个 ID 引用,在vue的js中可通过
`this.$refs.XXX`
来获取到组件对象。
```
html
<base-input
ref=
"usernameInput"
></base-input>
```
你已经定义了这个 ref 的组件里,你可以使用:
`this.$refs.usernameInput`
来访问这个
` <base-input> `
实例。
##### 示例:
```
html
//base-input子组件页面
<template>
<view>
<input
:focus=
"isFocus"
type=
"text"
placeholder=
"请输入内容"
/>
</view>
</template>
<script>
export
default
{
name
:
"
base-input
"
,
data
()
{
return
{
"
isFocus
"
:
false
};
},
methods
:{
focus
(){
this
.
isFocus
=
true
}
}
}
</script>
```
允许父级组件通过下面的代码聚焦
` <base-input> `
里的输入框:
```
html
//index 父组件页面
<template>
<view>
<base-input
ref=
"usernameInput"
></base-input>
<button
type=
"default"
@
click=
"getFocus"
>
获取焦点
</button>
</view>
</template>
<script>
export
default
{
methods
:{
getFocus
(){
//通过组件定义的ref调用focus方法
this
.
$refs
.
usernameInput
.
focus
()
}
}
}
</script>
```
**注意**
> 非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text)
## 自定义事件
### 将原生事件绑定到组件
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录