</div><!--end: blogStats -->
</div><!--end: navigator 博客導航欄 -->
在Vue中通過自定義指令獲取元素
<div class="postBody">
<div id="cnblogs_post_body" class="cnblogs-markdown"><p>vue.js 是數據綁定的框架,大部分情況下我們都不需要直接操作 DOM Element,但在某些時候,我們還是有獲取DOM Element的需求的;<br>
在 vue.js 中,獲取某個DOM Element常用的方法是將這個元素改成一個組件 (component),然後通過 this.$el
去獲取,但是在一些很小的項目裏,在一些沒有使用 webpack 等構建工具的項目中,創建一個組件並不是那麼值得,所以 vue 提供了另一種操作DOM元素的方式,就是自定義指令 (directive) ;
自定義指令功能在DOM Element的生命週期內提供了不同的鉤子函數,並允許我們監聽指令綁定的數據的變化,但是它也是有缺點的,就是在指令的鉤子函數內無法通過 this
來訪問當前 vue 實例,也就無法進一步進行復雜的操作(雖然一般不需要什麼複雜的操作),在 vue 的鉤子函數 (lifecycle hook) 和方法 (method) 中也無法像 this.$el
那樣輕易的訪問到自定義指令綁定的DOM元素;
不過只要通過一點點變通的做法,就可以突破這個限制:
HTML代碼:
<div id="app">
<span class='test' v-run="register('test1')"></span>
<p class='test' v-run="register('test2')"></p>
</div>
JavaScript代碼:
const vm = new Vue({
el:'#app',
data : {
elements : {}
},
directives : {
run (el, binding) {
if (typeof binding.value == 'function')
binding.value(el);
}
},
methods : {
register (flag) {
return (el)=>{
this.elements[flag] = el;
}
}
},
beforeMount () {
console.log(this.elements.test1); //=> undefined
},
mounted () {
console.log(this.elements.test1); //=> the span DOM Element
console.log(this.elements.test2); //=> the p DOM Element
}
})
如代碼所示,建立一個名爲 run
的自定義指令,運行綁定的方法,並將當前 DOM Element 作爲參數傳入;
同時建立一個名爲 register
的方法,接收一個 flag 參數,並根據這個參數返回一個用於將傳入參數註冊到 this.elements
對象中的閉包函數;
將寫好的 run 指令和 register 方法搭配使用,就可以把想要的 DOM 註冊進this.elements,並在 hook 或者 method 中十分方便的訪問;
注意:自定義指令將會在DOM元素插入 Document 時,也就是組件 mount 時首次執行,所以在此之前,比如 beforeMount
鉤子中是無法使用的,這點也和 this.$el
一致,詳情可以查看官方文檔中的生命週期圖示;
其實也很好理解啦……在 mount 之前,根本就沒有這個實際的 DOM 元素,怎麼可能訪問的到……(:з)∠)