模板引用
儘管咱們講到了 提供/注入，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