uTools-Manuals/docs/vue/选项-其它.html

<h2 id="选项-其它"><a href="#选项-其它" class="headerlink" title="选项 / 其它" data-scroll="">选项 / 其它</a></h2><h3 id="name"><a href="#name" class="headerlink" title="name" data-scroll="">name</a></h3><ul>
<li><p><strong>类型</strong>：<code>string</code></p>
</li>
<li><p><strong>限制</strong>：只有作为组件选项时起作用。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>允许组件模板递归地调用自身。注意，组件在全局用 <code>Vue.component()</code> 注册时，全局 ID 自动作为组件的 name。</p>
<p>指定 <code>name</code> 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 <a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="noopener">vue-devtools</a>，未命名组件将显示成 <code>&lt;AnonymousComponent&gt;</code>，这很没有语义。通过提供 <code>name</code> 选项，可以获得更有语义信息的组件树。</p>
</li>
</ul>
<h3 id="delimiters"><a href="#delimiters" class="headerlink" title="delimiters" data-scroll="">delimiters</a></h3><ul>
<li><p><strong>类型</strong>：<code>Array&lt;string&gt;</code></p>
</li>
<li><p><strong>默认值</strong>：<code>["{{", "}}"]</code></p>
</li>
<li><p><strong>限制</strong>：这个选项只在完整构建版本中的浏览器内编译时可用。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>改变纯文本插入分隔符。</p>
</li>
<li><p><strong>示例</strong>：</p>
<pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">delimiters</span>: [<span class="hljs-string">'${'</span>, <span class="hljs-string">'}'</span>]
})

<span class="hljs-comment">// 分隔符变成了 ES6 模板字符串的风格</span></code></pre>
</li>
</ul>
<h3 id="functional"><a href="#functional" class="headerlink" title="functional" data-scroll="">functional</a></h3><ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>使组件无状态 (没有 <code>data</code> ) 和无实例 (没有 <code>this</code> 上下文)。他们用一个简单的 <code>render</code> 函数返回虚拟节点使他们更容易渲染。</p>
</li>
<li><p><strong>参考</strong>：<a href="guide/render-function.html#函数式组件">函数式组件</a></p>
</li>
</ul>
<h3 id="model"><a href="#model" class="headerlink" title="model" data-scroll="">model</a></h3><blockquote>
<p>2.2.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>{ prop?: string, event?: string }</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>允许一个自定义组件在使用 <code>v-model</code> 时定制 prop 和 event。默认情况下，一个组件上的 <code>v-model</code> 会把 <code>value</code> 用作 prop 且把 <code>input</code> 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 <code>value</code> prop 来达到不同的目的。使用 <code>model</code> 选项可以回避这些情况产生的冲突。</p>
</li>
<li><p><strong>Example</strong>：</p>
<pre><code class="hljs js">Vue.component(<span class="hljs-string">'my-checkbox'</span>, {
  <span class="hljs-attr">model</span>: {
    <span class="hljs-attr">prop</span>: <span class="hljs-string">'checked'</span>,
    <span class="hljs-attr">event</span>: <span class="hljs-string">'change'</span>
  },
  <span class="hljs-attr">props</span>: {
    <span class="hljs-comment">// this allows using the `value` prop for a different purpose</span>
    value: <span class="hljs-built_in">String</span>,
    <span class="hljs-comment">// use `checked` as the prop which take the place of `value`</span>
    checked: {
      <span class="hljs-attr">type</span>: <span class="hljs-built_in">Number</span>,
      <span class="hljs-attr">default</span>: <span class="hljs-number">0</span>
    }
  },
  <span class="hljs-comment">// ...</span>
})</code></pre>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">my-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"foo"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"some value"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-checkbox</span>&gt;</span></code></pre>
<p>上述代码相当于：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">my-checkbox</span>
  <span class="hljs-attr">:checked</span>=<span class="hljs-string">"foo"</span>
  @<span class="hljs-attr">change</span>=<span class="hljs-string">"val =&gt; { foo = val }"</span>
  <span class="hljs-attr">value</span>=<span class="hljs-string">"some value"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">my-checkbox</span>&gt;</span></code></pre>
</li>
</ul>
<h3 id="inheritAttrs"><a href="#inheritAttrs" class="headerlink" title="inheritAttrs" data-scroll="">inheritAttrs</a></h3><blockquote>
<p>2.4.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>默认值</strong>：<code>true</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 <code>inheritAttrs</code> 到 <code>false</code>，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 <code>$attrs</code> 可以让这些特性生效，且可以通过 <code>v-bind</code> 显性的绑定到非根元素上。</p>
<p>注意：这个选项<strong>不影响</strong> <code>class</code> 和 <code>style</code> 绑定。</p>
</li>
</ul>
<h3 id="comments"><a href="#comments" class="headerlink" title="comments" data-scroll="">comments</a></h3><blockquote>
<p>2.4.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>默认值</strong>：<code>false</code></p>
</li>
<li><p><strong>限制</strong>：这个选项只在完整构建版本中的浏览器内编译时可用。</p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当设为 <code>true</code> 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。</p>
</li>
</ul>