- Vue.js從入門到項目實踐（超值版）
- 聚慕課教育研發中心編著
- 350字
- 2022-07-29 14:27:38
3.3.5 terminal
terminal：使用terminal選項是一個相對較為復雜的過程，選項terminal的作用是阻止Vue.js遍歷當前元素及其內部元素，并由該指令本身去編譯綁定元素及其內部元素。Vue通過遞歸遍歷DOM樹來編譯模塊。但是當它遇到terminal指令時會停止遍歷這個元素的后代元素，并由terminal指令接管編譯這個元素及其后代元素。v-if和v-for都是terminal指令。
編寫自定義terminal指令是一個高級話題，需要較好地理解Vue的編譯流程，但這不是說不可能編寫自定義terminal指令。用terminal:true指定自定義terminal指令，可能還需要用Vue.FragmentFactory來編譯partial。下面是一個自定義terminal指令的示例，terminal指令編譯內容模板并將結果注入頁面的另一個地方。
提示：如果想編寫自定義terminal指令代碼，建議讀者先通讀內置terminal指令的源碼（如v-if和v-for），以便更好地了解Vue的內部機制。
代碼如下：
var FragmentFactory = Vue.FragmentFactoryvar remove = Vue.util.removevar createAnchor = Vue.util.
createAnchor
Vue.directive('inject', {
terminal: true,
bind: function(){
var container = document.getElementById(this.arg)
this.anchor = createAnchor('v-inject')
container.appendChild(this.anchor)
remove(this.el)
var factory = new FragmentFactory(this.vm, this.el)
this.frag = factory.create(this._host, this._scope, this._frag)
this.frag.before(this.anchor)
},
unbind: function(){
this.frag.remove()
remove(this.anchor)
}
})
<div id="modal"></div>
<div v-inject:modal>
<h3>header</h3>
<p>body</p>
<p>footer</p>
</div>