Vue2.0的八种常用传值方式、父传子、子传父、非父子组件传值（最完整）

最新推荐文章于 2023-08-10 08:33:10 发布
最新推荐文章于 2023-08-10 08:33:10 发布
阅读量953 收藏 1
点赞数
分类专栏： Vue
原文链接：https://blog.csdn.net/qq_36711388/article/details/82949871
版权
1
转载链接： https://blog.csdn.net/qq_36711388/article/details/82949871 https://blog.csdn.net/weixin_41910848/article/details/81673733

Vue2.0 传值方式：

在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。

  • 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

    <p><img alt="这里写图片描述" class="has" src="https://img-blog.csdn.net/20180110222712301?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZGVyX3hpb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast"></p>

<p><strong>接下来，我们通过实例来看可能会更明白一些：</strong></p>

<h2><a name="t0"></a><span style="color:#ffbb66;"><strong>1. 父组件向子组件进行传值props</strong></span></h2>

<p><img alt="这里写图片描述" class="has" src="https://img-blog.csdn.net/20180110230330352?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZGVyX3hpb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast"></p>

<p>父组件：</p>

<pre class="has" name="code"><code class="hljs xml"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    父组件:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"name"</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-comment">&lt;!-- 引入子组件 --&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">child</span> <span class="hljs-attr">:inputName</span>=<span class="hljs-string">"name"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-keyword">import</span> child <span class="hljs-keyword">from</span> <span class="hljs-string">'./child'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">components</span>: {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      child</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    data () {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-keyword">return</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-attr">name</span>: <span class="hljs-string">''</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div></div></li></ol></code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre>
</li>
<li>子组件：</li>
<li>
<pre class="has" name="code"><code class="hljs xml"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    子组件:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{inputName}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-comment">// 接受父组件的值</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    props: {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">inputName</span>: <span class="hljs-built_in">String</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div></div></li></ol></code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre>
</li>
<li>
<h2><a name="t1"></a><span style="color:#ffbb66;"><strong>2. 子组件向父组件传值$emit,父组件通过子组件的ref属性获取值</strong></span></h2>
</li>
<li>
<p><img alt="这里写图片描述" class="has" src="https://img-blog.csdn.net/20180110234618512?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGFuZGVyX3hpb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast"></p>

<p>子组件：</p>

<pre class="has" name="code"><code class="hljs xml"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    子组件:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{childValue}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-comment">&lt;!-- 定义一个子组件传值的方法 --&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"点击触发"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"childClick"</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    data () {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-keyword">return</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-attr">childValue</span>: <span class="hljs-string">'我是子组件的数据'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">methods</span>: {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      childClick () {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-comment">// childByValue是在父组件on监听的方法</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-comment">// 第二个参数this.childValue是需要传的值</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'childByValue'</span>, <span class="hljs-keyword">this</span>.childValue)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div></div></li></ol></code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre>
</li>
<li>父组件：</li>
<li>
<pre class="has" name="code"><code class="hljs xml"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    父组件:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{name}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-comment">&lt;!-- 引入子组件 定义一个on的方法监听子组件的状态--&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag">&lt;<span class="hljs-name">child</span> <span class="hljs-attr">v-on:childByValue</span>=<span class="hljs-string">"childByValue"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-keyword">import</span> child <span class="hljs-keyword">from</span> <span class="hljs-string">'./child'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">components</span>: {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      child</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    data () {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-keyword">return</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-attr">name</span>: <span class="hljs-string">''</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">methods</span>: {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">childByValue</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">childValue</span>) </span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-comment">// childValue就是子组件传过来的值</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">this</span>.name = childValue</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div></div></li></ol></code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre>
</li>

 

尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。
为此可以使用 ref 为子组件指定一个引用 ID。例如：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div id=
     
     "parent">
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       
     
     <user-profile ref="profile"></user-profile>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var parent = 
     
     new Vue({ 
     
     el: 
     
     '#parent' })
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // 访问子组件实例
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     var child = parent.$refs.profile

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对
应的子组件。
$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接
操作子组件的
应急方案——应当避免在模板或计算属性中使用 $refs。

具体使用方法：

父组件


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <template>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <div id="app">
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         {{ a }}
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <button @click="getchild">通过ref得到子组件的值
     
     </button>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <!-- 使用组件 -->
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <three ref="mesage"/>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     </div>
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </template>
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>
     
     
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     import three 
     
     from 
     
     './components/three'
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default {
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     components:{
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         three,
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       data(){
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     return {
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     a:
     
     '我是父组件',
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     methods:{
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         getchild(){
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    	   
     
     // 通过this.$refs调用
    
    
    
   
   
  27. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     console.log(
     
     this.$refs.mesage.mes)
    
    
    
   
   
  28. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }
    
    
    
   
   
  29. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  30. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  31. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>
    
    
    
   
   
  32. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  33.

子组件： 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <template>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <div class="three">
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {{mes}}
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     </div>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </template>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>
     
     
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    	
     
     export 
     
     default {
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     	  data() {
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    	    
     
     return {
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    	        
     
     mes:
     
     '666'
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     	    };
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     	  }
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     	};
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  17.


 

3. 事件总线 $emit　/ $on

 

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

公共bus.js


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //bus.js
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     import Vue 
     
     from 
     
     'vue'
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default 
     
     new Vue()
  • 组件A：
  • 
   
   
    1. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       <template>
      
      
      
     
     
    2. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       <div>
      
      
      
     
     
    3. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           A组件:
      
      
      
     
     
    4. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
          
       
       <span>{{elementValue}}
       
       </span>
      
      
      
     
     
    5. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
          
       
       <input type="button" value="点击触发" @click="elementByValue">
      
      
      
     
     
    6. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       </div>
      
      
      
     
     
    7. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       </template>
      
      
      
     
     
    8. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       <script>
       
       
      
      
      
     
     
    9. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       // 引入公共的bug，来做为中间传达的工具
      
      
      
     
     
    10. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       import Bus 
       
       from 
       
       './bus.js'
      
      
      
     
     
    11. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       export 
       
       default {
      
      
      
     
     
    12. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           data () {
      
      
      
     
     
    13. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
            
       
       return {
      
      
      
     
     
    14. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
              
       
       elementValue: 
       
       4
      
      
      
     
     
    15. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
             }
      
      
      
     
     
    16. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           },
      
      
      
     
     
    17. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
          
       
       methods: {
      
      
      
     
     
    18. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
            
       
       elementByValue: 
       
       function () {
      
      
      
     
     
    19. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
               Bus.$emit(
       
       'val', 
       
       this.elementValue)
      
      
      
     
     
    20. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
             }
      
      
      
     
     
    21. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           }
      
      
      
     
     
    22. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
         }
      
      
      
     
     
    23. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       </script>
  • 组件B：
  • 
   
   
    1. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       <template>
      
      
      
     
     
    2. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       <div>
      
      
      
     
     
    3. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           B组件:
      
      
      
     
     
    4. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
          
       
       <input type="button" value="点击触发" @click="getData">
      
      
      
     
     
    5. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
          
       
       <span>{{name}}
       
       </span>
      
      
      
     
     
    6. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       </div>
      
      
      
     
     
    7. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       </template>
      
      
      
     
     
    8. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       <script>
       
       
      
      
      
     
     
    9. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       import Bus 
       
       from 
       
       './bus.js'
      
      
      
     
     
    10. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
        
       
       export 
       
       default {
      
      
      
     
     
    11. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           data () {
      
      
      
     
     
    12. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
            
       
       return {
      
      
      
     
     
    13. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
              
       
       name: 
       
       0
      
      
      
     
     
    14. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
             }
      
      
      
     
     
    15. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           },
      
      
      
     
     
    16. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
          
       
       mounted: 
       
       function () {
      
      
      
     
     
    17. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
            
       
       var vm = 
       
       this
      
      
      
     
     
    18. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
            
       
       // 用$on事件来接收参数
      
      
      
     
     
    19. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
             Bus.$on(
       
       'val', (data) => {
      
      
      
     
     
    20. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
              
       
       console.log(data)
      
      
      
     
     
    21. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
               vm.name = data
      
      
      
     
     
    22. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
             })
      
      
      
     
     
    23. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           },
      
      
      
     
     
    24. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
          
       
       methods: {
      
      
      
     
     
    25. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
            
       
       getData: 
       
       function () {
      
      
      
     
     
    26. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
              
       
       this.name++
      
      
      
     
     
    27. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
             }
      
      
      
     
     
    28. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
           }
      
      
      
     
     
    29. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
         }
      
      
      
     
     
    30. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       </script>

  • 4. 利用vuex

（1）简要介绍Vuex原理

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

（2）简要介绍各模块在流程中的功能：

  1. Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。

  2. dispatch：操作行为触发方法，是唯一能执行action的方法。

  3. actions：操作行为处理模块,由组件中的 $store.dispatch('action 名称',data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。

  4. commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

  5. mutations：状态改变操作方法，由actions中的 commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。

  6. state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

  7. getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

  • 5.Vuex与localStorage

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。

 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     let defaultCity = 
     
     "北京"
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     try {   
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // 用户关闭了本地存储功能，此时在外层加个try...catch
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     if(!defaultCity){
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         defaultCity = 
     
     JSON.parse(
     
     window.localStorage.getItem(
     
     'defaultCity'))
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
     
     catch(e){}
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
     
     new Vuex.Store({
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     state: {
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     city: defaultCity
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     mutations: {
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         changeCity(state, city) {
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           state.city = city
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     try{
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     window.localStorage.setItem(
     
     'defaultCity', 
     
     JSON.stringify(state.city));   
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     // 数据改变的时候把数据拷贝一份保存到localStorage里面
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
          } 
     
     catch(e) {}
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     })

这里需要注意的是：由于vuex里，我们保存的状态，都是数组，而localStorage只支持字符串，所以需要用JSON转换：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     JSON.stringify(state.subscribeList);   
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // array -> string
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     JSON.parse(
     
     window.localStorage.getItem(
     
     "subscribeList"));    
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // string -> array

  • 6.  $attrs　/ $listeners

1.简介

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法---- $attrs/ $listeners

  • $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。

  • $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件接下来我们看个跨级通信的例子：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //index.vue
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <template>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <h2>浪里行舟
     
     </h2>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <child-com1 :foo="foo" :boo="boo" :coo="coo" :doo="doo" title="前端工匠">
     
     </child-com1>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     </div>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </template>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>
     
     
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     import childCom1 
     
     from 
     
     "./childCom1.vue"
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default {
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     components: {childCom1},
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         data (){
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     return {
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                 foo：
     
     "javascript",
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     boo: 
     
     "Html",
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     coo: 
     
     "Css",
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
                
     
     doo: 
     
     "Vue"
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             }
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>
    
    
    
   
   

 
 

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //childCom1.vue
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <template>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <p>foo:{{foo}}
     
     </p>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <p>childCom1的$attrs:{{$attrs}}
     
     </p>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <child-com2 v-bind="$attrs">
     
     </child-com2>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     </div>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </template>
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>
     
     
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     import childCom2 
     
     from 
     
     "./childCom2.vue";
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default {
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     components:{ childCom2 },
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     inheritAttrs:
     
     false,
     
     //可以关闭自动挂载到组件跟元素上的没有在props声明的属性
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         props: { 
     
     foo: 
     
     String },
     
     // foo作为props属性绑定
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         created() { 
     
     console.log(
     
     this.$attrs); 
     
     // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>

 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //childCom2.vue
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <template>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <p>boo:{{boo}}
     
     </p>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <p>childCom2的$attrs:{{$attrs}}
     
     </p>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <child-com3 v-bind="$attrs">
     
     </child-com3>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     </div>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </template>
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>
     
     
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     import childCom3 
     
     from 
     
     "./childCom3.vue";
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default {
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     components:{ childCom3 },
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     inheritAttrs:
     
     false,
     
     //可以关闭自动挂载到组件跟元素上的没有在props声明的属性
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         props: { 
     
     foo: 
     
     String },
     
     // foo作为props属性绑定
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         created() { 
     
     console.log(
     
     this.$attrs); 
     
     // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>

 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // childCom3.vue
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <template>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <div> 
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <p>childCom3: {{ $attrs }}
     
     </p>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     </div>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </template>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>
     
     
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default{
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     props: {
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     coo: 
     
     String,
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     title: 
     
     String
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     };
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>

 

如上图所示 $attrs表示没有继承数据的对象，格式为{属性名：属性值}。Vue2.4提供了 $attrs ,$listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。

简单来说： $attrs与 $listeners 是两个对象， $attrs 里存放的是父组件中绑定的非 Props 属性， $listeners里存放的是父组件中绑定的非原生事件。

  • 7.provide/inject

1.简介

Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

2.举个例子

假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // A.vue
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default{
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     provide: {    
     
     name: 
     
     '浪里行舟'  }
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // B.vue
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default {
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     inject: [
     
     'name'],
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       mounted () {
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     console.log(
     
     this.name); 
     
     // 浪里行舟
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }

可以看到，在 A.vue 里，我们设置了一个 provide: name，值为 浪里行舟，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。这就是 provide / inject API 最核心的用法。

需要注意的是：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue官方文档 所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 浪里行舟。

3.provide与inject 怎么实现数据响应式

一般来说，有两种办法：

  • provide祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如props，methods

  • 使用2.6最新API Vue.observable 优化响应式 provide(推荐)

我们来看个例子：孙组件D、E和F获取A组件传递过来的color值，并能实现数据响应式变化，即A组件的color变化后，组件D、E、F不会跟着变（核心代码如下：）

 
 
 

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // A 组件 
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           <h1>A 组件</h1>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           <button 
     
     @click=
     
     "() => changeColor()">改变color</button>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           <ChildrenB/><ChildrenC/>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </div>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     ......
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     data() {   
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     return
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
          {
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             color: 
     
     "blue"
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
          };
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // provide() {
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //   return {
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //     theme: {
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //       color: this.color //这种方式绑定的数据并不是可响应的
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //     } // 即A组件的color变化后，组件D、E、F不会跟着变 
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //   };
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // },
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       provide() { 
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     return{
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           theme: 
     
     this
     
     //方法一：提供祖先组件的实例
    
    
    
   
   
  27. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         };
    
    
    
   
   
  28. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  29. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       methods: {
    
    
    
   
   
  30. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         changeColor(color) {  
    
    
    
   
   
  31. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     if(color) {     
    
    
    
   
   
  32. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     this.color = color;
    
    
    
   
   
  33. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         } 
     
     else{      
    
    
    
   
   
  34. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     this.color = 
     
     this.color === 
     
     "blue"? 
     
     "red": 
     
     "blue";
    
    
    
   
   
  35. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
          }
    
    
    
   
   
  36. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
        }
    
    
    
   
   
  37. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  38. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // 方法二:使用vue2.6最新API Vue.observable 优化响应式 provide
    
    
    
   
   
  39. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // provide() {
    
    
    
   
   
  40. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //   this.theme = Vue.observable({
    
    
    
   
   
  41. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //     color: "blue"
    
    
    
   
   
  42. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //   });
    
    
    
   
   
  43. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //   return {
    
    
    
   
   
  44. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //     theme: this.theme
    
    
    
   
   
  45. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //   };
    
    
    
   
   
  46. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // },
    
    
    
   
   
  47. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // methods: {
    
    
    
   
   
  48. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //   changeColor(color) {
    
    
    
   
   
  49. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //     if (color) {
    
    
    
   
   
  50. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //       this.theme.color = color;
    
    
    
   
   
  51. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //     } else {
    
    
    
   
   
  52. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
    
    
    
   
   
  53. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //     }
    
    
    
   
   
  54. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     //   }  
    
    
    
   
   
  55. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // }
    
    
    
   
   

 
 

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // F 组件 
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <template functional>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <div class="border2">
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <h3 :style="{ color: injections.theme.color }">F 组件
     
     </h3>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     </div>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </template>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>
     
     
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      {
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     inject: {
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     theme: {   
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
     
     //函数式组件取值不一样     
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     default: 
     
     () => ({})
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
        }
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     };
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>

虽说provide 和 inject 主要为高阶插件/组件库提供用例，但如果你能在业务中熟练运用，可以达到事半功倍的效果！

  • 8. $parent / $children　＆ ref

  • ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

  • $parent / $children：访问父 / 子实例

需要注意的是：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。我们先来看个用 ref来访问组件的例子：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // component-a 子组件
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      {
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       data () {   
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     return
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
          {
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
             
     
     title: 
     
     'Vue.js'
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
          }
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       },
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     methods: {
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         sayHello () {
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     window.alert(
     
     'Hello');
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // 父组件
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <template>
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <component-a ref="comA"></component-a>
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </template>
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>  
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     export 
     
     default
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      {
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         mounted () {    
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     const comA = 
     
     this.$refs.comA;
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     console.log(comA.title);  
     
     // Vue.js
    
    
    
   
   
  27. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             comA.sayHello();  
     
     // 弹窗
    
    
    
   
   
  28. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }
    
    
    
   
   
  29. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  30. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <
     
     /script>

 

不过，这两种方法的弊端是，无法在跨级或兄弟间通信。


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     // parent.vue
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <component-a>
     
     </component-a>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <component-b>
     
     </component-b>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <component-b>
     
     </component-b>

我们想在 component-a 中，访问到引用它的页面中（这里就是 parent.vue）的两个 component-b 组件，那这种情况下，就得配置额外的插件或工具了，比如 Vuex 和 Bus 的解决方案。

总结

常见使用场景可以分为三类：

  • 父子通信： 父向子传递数据是通过 props，子向父是通过 events（ $emit）；通过父链 / 子链也可以通信（ $parent / $children）；ref 也可以访问组件实例；provide / inject API； $attrs/$listeners

  • 兄弟通信： Bus；Vuex

  • 跨级通信： Bus；Vuex；provide / inject API、 $attrs/$listeners

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

  1. 全新的界面设计 ，将会带来全新的写作体验；
  2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
  3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
  4. 全新的 KaTeX数学公式 语法；
  5. 增加了支持甘特图的mermaid语法1 功能；
  6. 增加了 多屏幕编辑 Markdown文章功能；
  7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
  8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片: Alt

居中的图片: Alt

居中并且带尺寸的图片: Alt

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

  • 项目
    • 项目
      • 项目
  1. 项目1
  2. 项目2
  3. 项目3
  • 计划任务
  • 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目Value
电脑$1600
手机$12
导管$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列第二列第三列
第一列文本居中第二列文本居右第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPEASCIIHTML
Single backticks'Isn't this fun?'‘Isn’t this fun?’
Quotes"Isn't this fun?"“Isn’t this fun?”
Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

创建一个自定义列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t &ThinSpace; . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
  • 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接
长方形
圆
圆角长方形
菱形
  • 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no
  • 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

  1. mermaid语法说明 ↩︎

  2. 注脚的解释 ↩︎

CAFFE009
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧
VUE2.0 饿了吗视频学习笔记（五）：父子对象传递、显示图片
weixin_30823683的博客
03-16 91
一、父子组件之间对象传递 1、app.Vue中的v-header 中加入 v-bind:seller="seller" template> <div id="app"> <v-header v-bind:seller="seller"></v-header> <div class="tab"> ...
vue2传值方式总结 （十一种方法）
qq_70703397的博客
08-10 6970
通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 ，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟root，可以获取根组件实例。（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的。（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法 ​。
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
热门推荐
华世中国的博客
01-09 34万+
Vue2.0 传值方式：在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。先给大家介绍Vue常见的三种传值方式
vue父子组件传值：父传子、子传父
upStar1的博客
08-30 6074
1.父组件引入子组件 2.父组件给子组件传值 3.子组件接收父组件传来的值 4.子组件将值传给父组件 6.父组件直接调用子组件的方法 5.父组件接收子组件传来的值
Vue2.x学习三：事件处理&生命周期钩子
weixin_33906657的博客
06-03 98
这里，我们要补充一下在之前的学习中，我们说到了在构建new Vue()实例对象中，我们往里面写了el和data属性，其实还有其他属性，如：methods,watch,computed,props,以及生命周期钩子函数等。我们知道，el是Vue实例的作用对象，data定义所有页面中的数据。而methods则存放我们定义的所有的事件处理函数，...
Vue常用传值方式、父传子、子传父及非父子实例分析
10-15
主要介绍了Vue常用传值方式、父传子、子传父及非父子,结合实例形式分析了vue.js常见的传值方式及相关操作注意事项,需要的朋友可以参考下
Vue三种常用传值示例(父传子、子传父、非父子)
10-18
主要介绍了Vue传值-三种常用传值示例，主要介绍了父组件向子组件进行传值，子组件向父组件传值和非父子组件进行传值，感兴趣的小伙伴们可以参考一下
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue @click 绑定的函数，同时传入事件对象和自定义参数
Mr_Bobcp的博客
11-26 1万+
虽然是从Vue.js中了解到的，但是挺多地方也是适用的。 一、仅仅传入事件对象 HTML <div id="app"> <!-- 不写任何参数 --> <button @click="click">click</button> </div> JS new Vue({ el: '#app', 　　methods: { 　　　　click: function(event){ // 事件对象会自动传入第一个参数 　　　　　　console
Vue——组件高级——传值
qq_52301431的博客
09-07 2054
子组件通过自定义事件给父组件传count的新值n，父组件收到新值后修改自己的data，自然就会刷新自己 和子组件的模板子组件通过调用父组件的方法给父组件传值:子组件的自定义事件中,用$emit触发事件调用父组件方法给父组件传值 (重点)**因为通过属性传值是单向的**,有时候我们需要子组件的data 数据需要交给父组件使用:通过在子组件上定义自定义事件，在子组件中通过$emit 来触发事件；子组件的事件被触发并传参，事件处理函数可以接收到子组件的数据；
vue2点击事件携带本身+参数
10-23 756
记得是这样 <div @click="fn（$event,'1111'）">确定</div> fn(a,b){ console.log(a,b) }
vue中传值的方法
czw2ly的博客
12-05 3275
主要是谈谈vue中组件传值的方法，供大家参考
vue2组件之间传值（数据共享）
cn33333的博客
11-09 5157
父组件中使用子组件时，直接绑定属性，将要传递的值通过该属性传递给子组件。
vue怎么吧data里的属性的值赋予给另一个属性
weixin_35755823的博客
01-14 1023
在Vue中，可以使用"v-bind"或":"来绑定data里的属性值到另一个属性上。例如，如果有一个data里的属性名为"message"，要将它的值赋给另一个属性"myMessage"，可以这样写： <div v-bind:myMessage="message"></div> 或 <div:myMessage="message"></div> ...
vue2中的props属性传递
qq_43203949的博客
12-17 1万+
vue中的props对象 1.props对象的定义 props其实是properties的缩写，props对象是用来定义属性的。props对象可以接受数组形式的参数又或者是对象形式的参数。 数组形式 props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 对象形式 在对象形式中，可以指定该属性的类型，这些 property 的名称和值分别是 prop 各自的名称和类型。 props: { title: String, lik
vue 参数传递的几种方法
小白阿里里的博客
08-22 1万+
开发过程中参数传递 1. 通过 name 传递参数 图一 图二 我们常把页面的路由配置在图一中的 router 文件夹下的 js 文件中，图二为配置的内容。这其中的 name 属性是可以作为参数传递的，在模版中直接只用 {{$route.name}} 接收，即可以在模版中显示。 2. 通过 &amp;amp;amp;lt; router-link &amp;amp;amp;gt; 中的 to 传递参数 使用 &amp;amp;amp;lt;...
Vue弹窗封装使用富文本编辑器（WangEditor）含传值问题。
qq_51484868的博客
01-22 2785
Vue弹窗封装使用富文本编辑器（WangEditor）含传值问题。
vue父组件向子组件传值
好好学习，天天向上
05-29 574
子组件 在父组件中引用 &amp;amp;amp;lt;msgvue v-bind:chatData = &amp;amp;quot;chatData&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/msgvue&amp;amp;amp;gt; v-bind: 绑定要传的值，不用v-bind直接把值放到标签上 子组件接受的父组件的值分为——引用类型和普通类型两种， 普通类型：字符串（String）、
vue组件子传父传值
最新发布
09-13
在Vue中，子组件向父组件传值可以通过使用事件来实现。...在Vue中还有其他方式可以实现子组件向父组件传值的功能，如使用`$parent`属性或通过Vuex进行状态管理等。具体选择哪种方法取决于你的具体需求和项目架构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值