组件传值 props $emit $on $refs bus
<pre><code class="language-plantuml">skinparam backgroundColor #FCFCFC
父组件->子组件:Props （@eventName） 可获取返回值
父组件<-子组件:event（$emit） 可父组件触发</code></pre>
<h3>父传子</h3>
<ul>
<li><strong>props</strong></li>
</ul>
<h3>子传父</h3>
<ul>
<li><strong>Function</strong>
<strong><code>（函数具体功能写在父组件，像callback）</code></strong>
props中的Function类型，在子组件中被调用，并传递子组件的数据给父组件。</li>
<li>
<p><strong>v-on</strong> （自定义事件）
<strong><code>（函数具体功能写在父组件，像callback）</code></strong>
子组件用$emit触发的自定义事件，并传递子组件的数据给父组件。（子组件通常没有用$on监听该事件）</p>
</li>
<li><strong>props中的 Function 与自定义事件的区别</strong>
<blockquote>
<p>自定义事件<strong><code>可在父组件中通过$refs 用 $emit 【主动】 触发</code></strong>
props中的 Function 由子组件 被动 执行，<strong><code>子组件可以根据Function(在父组件定义)的【返回值】进行下一步操作</code></strong></p>
<h6><font color=blue>使用选择： 需要根据父组件function的返回值用props，需要父组件触发用自定义事件</font></h6>
</blockquote></li>
</ul>
<h3>兄弟爷孙等</h3>
<ul>
<li>
<p><strong>$on</strong>
<strong><code><span color="blue">（函数具体功能写在组件内部）</span></code></strong>
$on在组件内部定义一个自定义事件，及要执行的函数，兄弟爷父孙等可结合$refs，$emit触发它。</p>
</li>
<li>
<p><strong>$refs</strong>
<strong><code>简单粗暴获得子组件的方法，事件，属性</code></strong>
dom引用,一般需要写在$netxTick()里
给组件一个ref属性值，然后调用他的方法或属性或自定义事件</p>
</li>
<li><strong>bus</strong>
在main.js中创建全局的Vue实例作为事件总线，结合$on $emit 实现所有组件的自定义事件监听</li>
</ul>
<pre><code class="language-html"><mycomponent ref="myref"></myomponent>
<script>
//给组件一个ref属性，然后就可以执行他的方法
$netxTick(()=>{
this.$refs.myref.method();
})
</script>
</code></pre>