• 135361

    文章

  • 827

    评论

  • 13

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

Vue 3 模板引用

2年想跳槽阿里,大咖揭秘大厂面试的那些事儿 >>

模板引用

尽管我们讲到了 提供/注入,props 和自定义事件,但是如果有时候可能仍然需要直接访问原生 DOM 元素的方法或者属性,我们可以通过 ref 属性为子组件或者 HTML 元素指定引用:

接下来我们在 src/TemplateM.vue 写下如下代码:

<template>
  <div class="template-m-wrap">
    <input ref="input" />
  </div>
</template>
<script>
export default {
  name"TemplateM",
  components: {
    TestCom,
  },
  provide() {
    return { parentthis };
  },
  data() {
    return {
      firstName"dsdsdd",
      lastName"Ken",
    };
  },
  methods: {
    
  },
};
</script>

例如,你希望在 DOM 挂载的时候,出发输入框自动聚焦:

methods: {
    focusInput() {
        this.$refs.input.focus()
    }
},
mounted() {
    this.focusInput()
}

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

本文分享自微信公众号 - 人生代码(lijinwen1996329ken)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客