uTools-Manuals/docs/vue/实例属性.html

<h2 id="实例属性"><a href="#实例属性" class="headerlink" title="实例属性" data-scroll="">实例属性</a></h2><h3 id="vm-data"><a href="#vm-data" class="headerlink" title="vm.$data" data-scroll="">vm.$data</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。</p>
</li>
<li><p><strong>参考</strong>：<a href="#data">选项 / 数据 - data</a></p>
</li>
</ul>
<h3 id="vm-props"><a href="#vm-props" class="headerlink" title="vm.$props" data-scroll="">vm.$props</a></h3><blockquote>
<p>2.2.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。</p>
</li>
</ul>
<h3 id="vm-el"><a href="#vm-el" class="headerlink" title="vm.$el" data-scroll="">vm.$el</a></h3><ul>
<li><p><strong>类型</strong>：<code>Element</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>Vue 实例使用的根 DOM 元素。</p>
</li>
</ul>
<h3 id="vm-options"><a href="#vm-options" class="headerlink" title="vm.$options" data-scroll="">vm.$options</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处：</p>
<pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">customOption</span>: <span class="hljs-string">'foo'</span>,
  <span class="hljs-attr">created</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$options.customOption) <span class="hljs-comment">// =&gt; 'foo'</span>
  }
})</code></pre>
</li>
</ul>
<h3 id="vm-parent"><a href="#vm-parent" class="headerlink" title="vm.$parent" data-scroll="">vm.$parent</a></h3><ul>
<li><p><strong>类型</strong>：<code>Vue instance</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>父实例，如果当前实例有的话。</p>
</li>
</ul>
<h3 id="vm-root"><a href="#vm-root" class="headerlink" title="vm.$root" data-scroll="">vm.$root</a></h3><ul>
<li><p><strong>类型</strong>：<code>Vue instance</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。</p>
</li>
</ul>
<h3 id="vm-children"><a href="#vm-children" class="headerlink" title="vm.$children" data-scroll="">vm.$children</a></h3><ul>
<li><p><strong>类型</strong>：<code>Array&lt;Vue instance&gt;</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当前实例的直接子组件。<strong>需要注意 <code>$children</code> 并不保证顺序，也不是响应式的。</strong>如果你发现自己正在尝试使用 <code>$children</code> 来进行数据绑定，考虑使用一个数组配合 <code>v-for</code> 来生成子组件，并且使用 Array 作为真正的来源。</p>
</li>
</ul>
<h3 id="vm-slots"><a href="#vm-slots" class="headerlink" title="vm.$slots" data-scroll="">vm.$slots</a></h3><ul>
<li><p><strong>类型</strong>：<code>{ [name: string]: ?Array&lt;VNode&gt; }</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>用来访问被<a href="guide/components.html#通过插槽分发内容">插槽分发</a>的内容。每个<a href="guide/components-slots.html#具名插槽">具名插槽</a> 有其相应的属性 (例如：<code>v-slot:foo</code> 中的内容将会在 <code>vm.$slots.foo</code> 中被找到)。<code>default</code> 属性包括了所有没有被包含在具名插槽中的节点，或 <code>v-slot:default</code> 的内容。</p>
<!-- todo: translation -->
<p><strong>Note:</strong> <code>v-slot:foo</code> is supported in v2.6+. For older versions, you can use the <a href="guide/components-slots.html#Deprecated-Syntax">deprecated syntax</a>.</p>
<p>在使用<a href="guide/render-function.html">渲染函数</a>书写一个组件时，访问 <code>vm.$slots</code> 最有帮助。</p>
</li>
<li><p><strong>示例</strong>：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">blog-post</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:header</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>About Me<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Copyright 2016 Evan You<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>If I have some content down here, it will also be included in vm.$slots.default.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>.
<span class="hljs-tag">&lt;/<span class="hljs-name">blog-post</span>&gt;</span></code></pre>
<pre><code class="hljs js">Vue.component(<span class="hljs-string">'blog-post'</span>, {
  <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">createElement</span>) </span>{
    <span class="hljs-keyword">var</span> header = <span class="hljs-keyword">this</span>.$slots.header
    <span class="hljs-keyword">var</span> body   = <span class="hljs-keyword">this</span>.$slots.default
    <span class="hljs-keyword">var</span> footer = <span class="hljs-keyword">this</span>.$slots.footer
    <span class="hljs-keyword">return</span> createElement(<span class="hljs-string">'div'</span>, [
      createElement(<span class="hljs-string">'header'</span>, header),
      createElement(<span class="hljs-string">'main'</span>, body),
      createElement(<span class="hljs-string">'footer'</span>, footer)
    ])
  }
})</code></pre>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="#slot"><code>&lt;slot&gt;</code> 组件</a></li>
<li><a href="guide/components.html#通过插槽分发内容">通过插槽分发内容</a></li>
<li><a href="guide/render-function.html#插槽">渲染函数 - 插槽</a></li>
</ul>
</li>
</ul>
<h3 id="vm-scopedSlots"><a href="#vm-scopedSlots" class="headerlink" title="vm.$scopedSlots" data-scroll="">vm.$scopedSlots</a></h3><blockquote>
<p>2.1.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>{ [name: string]: props =&gt; Array&lt;VNode&gt; | undefined }</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>用来访问<a href="guide/components-slots.html#作用域插槽">作用域插槽</a>。对于包括 <code>默认 slot</code> 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。</p>
<p><code>vm.$scopedSlots</code> 在使用<a href="guide/render-function.html">渲染函数</a>开发一个组件时特别有用。</p>
<p><strong>注意</strong>：从 2.6.0 开始，这个属性有两个变化：</p>
<ol>
<li><p>作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 <code>undefined</code>。</p>
</li>
<li><p>所有的 <code>$slots</code> 现在都会作为函数暴露在 <code>$scopedSlots</code> 中。如果你在使用渲染函数，不论当前插槽是否带有作用域，我们都推荐始终通过 <code>$scopedSlots</code> 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3。</p>
</li>
</ol>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="#slot"><code>&lt;slot&gt;</code> 组件</a></li>
<li><a href="guide/components-slots.html#作用域插槽">作用域插槽</a></li>
<li><a href="guide/render-function.html#插槽">渲染函数 - 插槽</a></li>
</ul>
</li>
</ul>
<h3 id="vm-refs"><a href="#vm-refs" class="headerlink" title="vm.$refs" data-scroll="">vm.$refs</a></h3><ul>
<li><p><strong>类型</strong>：<code>Object</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>一个对象，持有注册过 <a href="#ref"><code>ref</code> 特性</a> 的所有 DOM 元素和组件实例。</p>
</li>
<li><p><strong>参考</strong>：</p>
<ul>
<li><a href="guide/components-edge-cases.html#访问子组件实例或子元素">子组件引用</a></li>
<li><a href="#ref">特殊特性 - ref</a></li>
</ul>
</li>
</ul>
<h3 id="vm-isServer"><a href="#vm-isServer" class="headerlink" title="vm.$isServer" data-scroll="">vm.$isServer</a></h3><ul>
<li><p><strong>类型</strong>：<code>boolean</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>当前 Vue 实例是否运行于服务器。</p>
</li>
<li><p><strong>参考</strong>：<a href="guide/ssr.html">服务端渲染</a></p>
</li>
</ul>
<h3 id="vm-attrs"><a href="#vm-attrs" class="headerlink" title="vm.$attrs" data-scroll="">vm.$attrs</a></h3><blockquote>
<p>2.4.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: string }</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (<code>class</code> 和 <code>style</code> 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (<code>class</code> 和 <code>style</code> 除外)，并且可以通过 <code>v-bind="$attrs"</code> 传入内部组件——在创建高级别的组件时非常有用。</p>
</li>
</ul>
<h3 id="vm-listeners"><a href="#vm-listeners" class="headerlink" title="vm.$listeners" data-scroll="">vm.$listeners</a></h3><blockquote>
<p>2.4.0 新增</p>
</blockquote>
<ul>
<li><p><strong>类型</strong>：<code>{ [key: string]: Function | Array&lt;Function&gt; }</code></p>
</li>
<li><p><strong>只读</strong></p>
</li>
<li><p><strong>详细</strong>：</p>
<p>包含了父作用域中的 (不含 <code>.native</code> 修饰器的) <code>v-on</code> 事件监听器。它可以通过 <code>v-on="$listeners"</code> 传入内部组件——在创建更高层次的组件时非常有用。</p>
</li>
</ul>