模板引用
尽管咱们讲到了 提供/注入，props 和自定义事件，可是若是有时候可能仍然须要直接访问原生 DOM 元素的方法或者属性，咱们能够经过 ref 属性为子组件或者 HTML 元素指定引用：vue
接下来咱们在 src/TemplateM.vue 写下以下代码：web
<template>
<div class="template-m-wrap">
<input ref="input" />
</div>
</template>
<script>
export default {
name: "TemplateM",
components: {
TestCom,
},
provide() {
return { parent: this };
},
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源创计划”，欢迎正在阅读的你也加入，一块儿分享。ide