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>
上一章目录下一章