该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。
尽管存在 prop 和事件,但有时你可能仍然需要直接访问 JavaScript 中的子组件。为此,可以使用 ref
attribute 为子组件或 HTML 元素指定引用 ID。例如:
<input ref="input" />
例如,你希望以编程的方式 focus 这个 input 在组件上挂载,这可能有用
const app = Vue.createApp({})
app.component("base-input", {
template: `
<input ref="input" />
`,
methods: {
focusInput() {
this.$refs.input.focus()
}
},
mounted() {
this.focusInput()
}
})
此外,还可以向组件本身添加另一个 ref
,并使用它从父组件触发 focusInput
事件:
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput.focusInput()
当 ref
与 v-for
一起使用时,你得到的 ref
将是一个数组,其中包含镜像数据源的子组件。
WARNING
$refs
只会在组件渲染完成之后生效。这仅作为一个用于直接操作子元素的“逃生舱”——你应该避免在模板或计算属性中访问 $refs
。
参考:在组合式 API 中使用 template refs
#介绍当构建可靠的应用时,测试在个人或团队构建新特性、重构代码、修复 bug 等工作中扮演了关键的角色。尽管测试的流派有很多,...
概览(Tour)基本概念(Basic Concepts)Sublime Text的界面如下:标签(Tab):无需介绍。编辑区(Editing Area):无需介绍。...
延伸阅读(Further Reading)书籍(Books)Mastering Sublime Text:我读过的唯一一本关于Sublime Text的书籍,书中介绍的插件很...
sublime text 3有新版本后,会不停地在每次启动后弹窗提示更新版本:由于种种原因,导致不想升级现有版本的ST3,但是被它的升级提...