举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > vue使用模板 Vue 3.0 模板引用

vue使用模板 Vue 3.0 模板引用

2023-05-05 17:18 VUE3教程

vue使用模板 Vue 3.0 模板引用

vue使用模板 Vue 3.0 模板引用

vue使用模板

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。

尽管存在 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()

refv-for 一起使用时,你得到的 ref 将是一个数组,其中包含镜像数据源的子组件。

WARNING

$refs 只会在组件渲染完成之后生效。这仅作为一个用于直接操作子元素的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

参考:在组合式 API 中使用 template refs

阅读全文
以上是编程学为你收集整理的vue使用模板 Vue 3.0 模板引用全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • vue3.0测试版 Vue 3.0 测试

    vue3.0测试版 Vue 3.0 测试

    2023-04-07 VUE3教程

    #介绍当构建可靠的应用时,测试在个人或团队构建新特性、重构代码、修复 bug 等工作中扮演了关键的角色。尽管测试的流派有很多,...

  •  Sublime Text 概览

    Sublime Text 概览

    2023-03-31 Sublime Text 概览

    概览(Tour)基本概念(Basic Concepts)Sublime Text的界面如下:标签(Tab):无需介绍。编辑区(Editing Area):无需介绍。...

  •  Sublime Text 延伸阅读

    Sublime Text 延伸阅读

    2023-04-30

    延伸阅读(Further Reading)书籍(Books)Mastering Sublime Text:我读过的唯一一本关于Sublime Text的书籍,书中介绍的插件很...

  •  Sublime text3怎么关闭提示更新

    Sublime text3怎么关闭提示更新

    2023-05-15

    sublime text 3有新版本后,会不停地在每次启动后弹窗提示更新版本:由于种种原因,导致不想升级现有版本的ST3,但是被它的升级提...

  • vscode代码导航 vscode 小地

    vscode代码导航 vscode 小地

    2023-06-17

    细心的你可能已经发现了,在之前所有的截图里,我都把小地图关掉了(在查看菜单栏中可以打开或关闭小地图)。这是因为图片小,而...

© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部