项目中关于组件的使用经常会碰到这种情况：父子组件传和方法调用、兄弟组件的传值和方法调用、多个独立组件的数据共享和方法调用，例如：a、b组件的的数据共享，该数据是由c传出的，通过a、b组件修改共享参数，调用c方法实现a、b组件的数据更新。本文总结了上述的几种情况并分别讲解。
兄弟组件的传值和方法调用
框架：vue2
通过组件ref调用组件内的方法
父组件
<--! js部分 -->
methods: {
save() {
// 通过ref调用兄弟组件的方法
this.$refs.listNode.submit();
}
}" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="js hljs language-javascript"><template>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">MyA</span> @<span class="hljs-attr">save</span>=<span class="hljs-string">"save"</span>></span><span class="hljs-tag"></<span class="hljs-name">MyA</span>></span>
<span class="hljs-tag"><<span class="hljs-name">MyB</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"listNode"</span>></span><span class="hljs-tag"></<span class="hljs-name">MyB</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
</template>
<span class="language-xml"><--! js部分 -->
methods: {
save() {
// 通过ref调用兄弟组件的方法
this.$refs.listNode.submit();
}
}</span></pre><p><strong>组件一</strong></p><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// MyA
<el-button type="parimary" size="mini" @click="sure">确定</el-button>
// js
methods: {
sure() {
// 保存点击，数据通过$emit传出
this.$emit('save')
}
}" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// MyA</span>
<el-button type=<span class="hljs-string">"parimary"</span> size=<span class="hljs-string">"mini"</span> @click=<span class="hljs-string">"sure"</span>>确定</el-button>
<span class="hljs-comment">// js</span>
<span class="hljs-attr">methods</span>: {
<span class="hljs-title function_">sure</span>(<span class="hljs-params"></span>) {
<span class="hljs-comment">// 保存点击，数据通过$emit传出</span>
<span class="hljs-variable language_">this</span>.$emit(<span class="hljs-string">'save'</span>)
}
}</pre><p><strong>组件二</strong></p><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// MyB
<el-button type="parimary" size="mini" @click="submit">提交</el-button>
// js
methods: {
submit() {
console.log('方法被触发了')
}
}" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// MyB</span>
<el-button type=<span class="hljs-string">"parimary"</span> size=<span class="hljs-string">"mini"</span> @click=<span class="hljs-string">"submit"</span>>提交</el-button>
<span class="hljs-comment">// js</span>
<span class="hljs-attr">methods</span>: {
<span class="hljs-title function_">submit</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'方法被触发了'</span>)
}
}</pre><p><code>A</code>组件通过<code>emit</code>将方法回传，父组件触发<code>A</code>组件回传的事件，在父组件中通过<code>ref</code>在调用<code>B</code>组件内的事件。</p><p></p><hr><p></p><h2 id="item-0-2">多个独立组件的数据共享和方法调用</h2><h4>多个组件内的方法和数据互相驱动：eventBus</h4><p><strong>框架：vue2</strong><br>新建一个<code>eventBus.js</code>，定义事件全局事件总线。</p><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// eventBus.js
import Vue from 'vue'
export default new Vue();
// 该文件就两行" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// eventBus.js</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Vue</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Vue</span>();
<span class="hljs-comment">// 该文件就两行</span></pre><p>引入到<code>main</code>文件，挂载到<code>vue</code>原型上</p><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// main.js
import Vue from 'vue'
import eventBus from '@/utils/eventBus.js'
// .....
Vue.prototype.$bus = eventBus // 挂载到原型
// ..." title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Vue</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">import</span> eventBus <span class="hljs-keyword">from</span> <span class="hljs-string">'@/utils/eventBus.js'</span>
<span class="hljs-comment">// .....</span>
<span class="hljs-title class_">Vue</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">$bus</span> = eventBus <span class="hljs-comment">// 挂载到原型</span>
<span class="hljs-comment">// ...</span></pre><p>然后就可以在页面中使用了，使用的页面需要引入<code>eventBus.js</code></p><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// A组件
import bus from '@/utils/eventBus.js'
methods: {
// 分页
handleSizeChange(val) {
// 广播方法
bus.$emit('sizeChange',{page : val })
},
}" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// A组件</span>
<span class="hljs-keyword">import</span> bus <span class="hljs-keyword">from</span> <span class="hljs-string">'@/utils/eventBus.js'</span>
<span class="hljs-attr">methods</span>: {
<span class="hljs-comment">// 分页</span>
<span class="hljs-title function_">handleSizeChange</span>(<span class="hljs-params">val</span>) {
<span class="hljs-comment">// 广播方法</span>
bus.$emit(<span class="hljs-string">'sizeChange'</span>,{page : val })
},
}</pre><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// B组件
import bus from '@/utils/eventBus.js'
created() {
// $off解绑
bus.$off( 'sizeChange' ); // 使用前先解绑，否则在某些情况下会触发两次
// $on监听触发
bus.$on('sizeChange', (val) => {
// 事件内的操作....
this.getTable(val);
})
},
methods: {
getTable(val) {
// 通过bus触发
console.log(val); // { page: val }
},
}" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// B组件</span>
<span class="hljs-keyword">import</span> bus <span class="hljs-keyword">from</span> <span class="hljs-string">'@/utils/eventBus.js'</span>
<span class="hljs-title function_">created</span>(<span class="hljs-params"></span>) {
<span class="hljs-comment">// $off解绑</span>
bus.$off( <span class="hljs-string">'sizeChange'</span> ); <span class="hljs-comment">// 使用前先解绑，否则在某些情况下会触发两次</span>
<span class="hljs-comment">// $on监听触发</span>
bus.$on(<span class="hljs-string">'sizeChange'</span>, <span class="hljs-function">(<span class="hljs-params">val</span>) =></span> {
<span class="hljs-comment">// 事件内的操作....</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getTable</span>(val);
})
},
<span class="hljs-attr">methods</span>: {
<span class="hljs-title function_">getTable</span>(<span class="hljs-params">val</span>) {
<span class="hljs-comment">// 通过bus触发</span>
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(val); <span class="hljs-comment">// { page: val }</span>
},
}</pre><blockquote>需要注意的是，<code>eventBus</code>的 <code>$on</code> 事件需要在<code>created</code>等生命周期中使用，如果写在<code>methods</code>中使不会自动触发的。使用 <code>$on</code> 事件的时候需要先解绑，否则页面刷新后监听事件没有解绑，后续再次广播事件会触发两次。解绑可以在<code>beforeDestory</code>中操作也可以 <code>$off 后接 $on</code> 解绑后监听</blockquote><p><br><code>eventBus</code>相当于一个全局事件池，向全局事件池中添加和传入事件，事件池的事件可以作用于全局。</p><p></p><hr><p></p><h4>多个组件的数据共享以及数据修改：vuex</h4><p><strong>框架：vue3</strong><br><code>vuex</code>中可以存储全局数据以及事件，我们可以在任何页面访问<code>vuex</code>中的事件和方法，随着项目持续维护，我们不可能直接在<code>store</code>中的<code>index</code>中直接添加数据和方法，因此<code>vuex</code>提供了<code>module</code>功能，可以让我们分别管理自己独立的<code>module</code>模块。</p><blockquote>官网上是这么说的：<br>由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。<br>为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。</blockquote><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vuex@next --save" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript">npm install vuex@next --save</pre><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// sotre -> my_module
const my_module = {
state: () => ({
my_count : 0,
my_info : {
id : 1,
name : '我的模块'
}
}),
mutations: {
countChange(state,val) {
state.my_count += val
}
},
actions: {
// actions不直接修改数据
// context为store中的上下文，通过commit驱动mutations的方法来实现数据修改
countTen(context,num){
setTimeout(()=>{
context.commit('countChange',num.num)
},500)
}
},
getters: {
getMyName (state) {
return `这是${state.my_info.name}`
},
getMyCount (state) {
return `我的总数：${state.my_count}`
}
}
}
export default my_module;" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// sotre -> my_module</span>
<span class="hljs-keyword">const</span> my_module = {
<span class="hljs-attr">state</span>: <span class="hljs-function">() =></span> ({
my_count : <span class="hljs-number">0</span>,
my_info : {
id : <span class="hljs-number">1</span>,
name : <span class="hljs-string">'我的模块'</span>
}
}),
<span class="hljs-attr">mutations</span>: {
<span class="hljs-title function_">countChange</span>(<span class="hljs-params">state,val</span>) {
state.<span class="hljs-property">my_count</span> += val
}
},
<span class="hljs-attr">actions</span>: {
<span class="hljs-comment">// actions不直接修改数据</span>
<span class="hljs-comment">// context为store中的上下文，通过commit驱动mutations的方法来实现数据修改</span>
<span class="hljs-title function_">countTen</span>(<span class="hljs-params">context,num</span>){
<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=></span>{
context.<span class="hljs-title function_">commit</span>(<span class="hljs-string">'countChange'</span>,num.<span class="hljs-property">num</span>)
},<span class="hljs-number">500</span>)
}
},
<span class="hljs-attr">getters</span>: {
getMyName (state) {
<span class="hljs-keyword">return</span> <span class="hljs-string">`这是<span class="hljs-subst">${state.my_info.name}</span>`</span>
},
getMyCount (state) {
<span class="hljs-keyword">return</span> <span class="hljs-string">`我的总数：<span class="hljs-subst">${state.my_count}</span>`</span>
}
}
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> my_module;</pre><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// store -> index.js
import { createStore } from "vuex";
import my_module from "./my_module";
// 创建store实例
const store = createStore({
// 将my_module 挂载到modules中
modules: {
my_module
}
})
export default store;" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// store -> index.js</span>
<span class="hljs-keyword">import</span> { createStore } <span class="hljs-keyword">from</span> <span class="hljs-string">"vuex"</span>;
<span class="hljs-keyword">import</span> my_module <span class="hljs-keyword">from</span> <span class="hljs-string">"./my_module"</span>;
<span class="hljs-comment">// 创建store实例</span>
<span class="hljs-keyword">const</span> store = <span class="hljs-title function_">createStore</span>({
<span class="hljs-comment">// 将my_module 挂载到modules中</span>
<span class="hljs-attr">modules</span>: {
my_module
}
})
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> store;</pre><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store/index' // 导入vuex
createApp(App)
.use(store) // 挂载vuex
.mount('#app')" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'./style.css'</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span>
<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'./store/index'</span> <span class="hljs-comment">// 导入vuex</span>
<span class="hljs-title function_">createApp</span>(<span class="hljs-title class_">App</span>)
.<span class="hljs-title function_">use</span>(store) <span class="hljs-comment">// 挂载vuex</span>
.<span class="hljs-title function_">mount</span>(<span class="hljs-string">'#app'</span>)</pre><div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 页面中使用
<template>
<div>
<div>vuex——module</div>
<div>store中的值：{{ store.getters.getMyName }}</div>
<div>store中的值：{{ store.getters.getMyCount }}</div>
<button @click="addMyNum">count++</button>
<button @click="numMyTen">每次加10</button>
</div>
</template>
<script setup>
import { ref,computed} from "vue"
import { useStore} from 'vuex' // vue3中通过useStore使用store
const store = useStore();
// vuex-module
const addMyNum = () => {
store.commit('countChange',1)
}
const numMyTen = () => {
store.dispatch('countTen',{num:10})
}
</script>" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="javascript hljs language-javascript"><span class="hljs-comment">// 页面中使用</span>
<template>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>vuex——module<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>store中的值：{{ store.getters.getMyName }}<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>store中的值：{{ store.getters.getMyCount }}<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"addMyNum"</span>></span>count++<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"numMyTen"</span>></span>每次加10<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
</template>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">setup</span>></span><span class="language-javascript">
<span class="hljs-keyword">import</span> { ref,computed} <span class="hljs-keyword">from</span> <span class="hljs-string">"vue"</span>
<span class="hljs-keyword">import</span> { useStore} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> <span class="hljs-comment">// vue3中通过useStore使用store</span>
<span class="hljs-keyword">const</span> store = <span class="hljs-title function_">useStore</span>();
<span class="hljs-comment">// vuex-module</span>
<span class="hljs-keyword">const</span> <span class="hljs-title function_">addMyNum</span> = (<span class="hljs-params"></span>) => {
store.<span class="hljs-title function_">commit</span>(<span class="hljs-string">'countChange'</span>,<span class="hljs-number">1</span>)
}
<span class="hljs-keyword">const</span> <span class="hljs-title function_">numMyTen</span> = (<span class="hljs-params"></span>) => {
store.<span class="hljs-title function_">dispatch</span>(<span class="hljs-string">'countTen'</span>,{<span class="hljs-attr">num</span>:<span class="hljs-number">10</span>})
}
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span></pre><p></p><blockquote>vuex一般用来做全局状态管理，并不建议向vuex中存储非全局的事件和方法，如果所有的跨组件事件和方法都向vuex中存储，随着项目的持续维护，store中的数据就会越来越多，会导致vuex维护成本变高。</blockquote><p></p><hr><p></p><p><a href="https://link.segmentfault.com/?enc=TOuan6YUQLi3x3rLwrWSHg%3D%3D.LgMdvmLDvQ%2B9OgfstFQf62eCUqEPDs9ZbIN3qazdicqT6ng3Xlu%2BW0oyR81oAH2cQvxX38HDqjco6EI4KTfDp3ing90ppEmyxU%2FWGsH3HHiH93VdZS%2BVZzktE9h47qbF0WV7o9b9OzPqUVFT4gBEz1vPMKXXburUOAPV0pvvtQCafQalaU9D92LrFDicPGa5a0O7E8YMACbdGmhBdc6d6c9w%2FnRbipsC%2BjKB8KeQotavTDGDwciVuS9sWiVlS2gTAP9XlQtK2CcVr5mWzRdOOhnjCqLq%2BkWVZRpfuiRzzKQ0z8jn0CvIMoBRavyp39%2BkMrXZHCxNeU%2Fbfrbj9J7Sdou4HuV2i3p7HbxL8k1V7AWxg6TddRqMC%2BA9olEHkRa8Soemu4bmDZgqBuGz0UwBQI4bxGssvkvnPccYCJDnV5AZdWzjDljujZVMMqTPMWSJajJo1ENItGsSRrT1i4m7Mik9B87jniDXu5Mlb26sEDAtyyulUMX1UN2bOFJNh49RJkwJLuLA620V2aMBuYjbz11h5VstGxBB%2FvSHFAWJ7BS3SbU3oDLcp1Qd1G02n3OVClThoxV7nyiyf%2BPT6BOnmUtSnC27WcYlotnRKgSqe%2BU%3D" rel="nofollow" target="_blank">vue3-setup组件传值</a> （👈点击直达）<br><a href="https://link.segmentfault.com/?enc=ZDglc2YEGutxxAs%2BHQYPog%3D%3D.cg0NIS7KEk1GSf2WWX4CDFmEhIT2nuHlWUYpGnr3%2BYb0v0nu%2FNcKfoLIDX91zBInSWeJ7HzukKSglUQslRqbyFqarteM8DU0zct4e3Wj1zp2ACjTsV3nTSCrNmfFTZarOjbVs2rok%2BY4xlq9JXxTClZ4yIk03LFuZdrG6ZYF7I2Vxy%2BnLf%2BgcBSaSrlV3Y1ubQ6d4GFOnWTrjQo2p%2Bc8XFvmJMoaC0JdOXyMAR3QujsPxU03pvBMxG3k7AdvllMSgZfjTid1Rf9Xgk4DH77APHeRM1gO6gAMsN0bb3KylW1nGJZFizUaImDn%2FiuN%2BIQffd9S9OnU%2FS%2BeHzZB8xi0ng3x5nxFG59SXX8hHoPuFh5SMku8kB325F6NRicprXtu28YyiM6R3YxDF5ahBHwc8tYQ1GW9iAKtEqxV7hMYWCuHTxV5SrYXshU7WfoujYqCmj4gLIYSOUMZpB8TShdrrAscevR8f9eGKAtjvz35Uypoi%2FGwSxyBMbZXdww%2Bo%2FM7jFqUs3Lsv%2BkggD9QHD%2Fyv35fidWSdjYS0T1H8Uutr4bqkBeBlM9bxcYDGA3rGSWxbTlAku%2Bk%2B9GEght0WiubEOaZJDlkjnPiSuZHp5M7mRk%3D" rel="nofollow" target="_blank">微信小程序组件封装传值以及问题点规避</a> （👈点击直达）<br><a href="https://link.segmentfault.com/?enc=wPw9Lh6Mzi%2F942Qzpf5fPg%3D%3D.8R4cYDwcdPhnWKBTDlnecGudKK%2FtMk3coCJzvvtPvI%2B1JwsvBfOS57ioyWArShDMqxvzGEKV8aKJ9FQrzFnPrnVZs%2By23hYwVRzVJNW5qgO7KB7jDISzUfpmvhfNCdBvB4zEemJ1Br63HLxDl9KmE%2BW9Ncn%2FU%2BZLVzm7EzRsj6AaTr%2BTw5qSWNoMq%2FbXcW825drdQIESO16VBe8bepKC9pWs4DGJuJmYlLFPQ8SoUmqxWjnl1HUS9MfWDIZHhFs%2F%2FuzKVncIswLlvRNezYNIZTeMmOIkYmdS0BlKyrwZhC5ZQExjqdfsD4ARVFv8OaVQANrG%2FqBJVemT64pnET7%2Fy5%2Bu%2BM%2Bp0aojZ%2FFh4AhYvDQn17jBwEL6ptjxc61%2Fjgqkh6Hbp6IRzDb1b6hAGiUMxahBgv9UhAXLvnd8t2p7HvuxTKncabMfOPt9AE9XU5VlAyQyEDZTxpq4dBaODUWrIDULEt%2Fuk4lVqogbck9tyagr388Ye%2Bjxucwsnz966ozDrKVJYgWFW5kk%2FX%2Bifts1E%2F2GU%2Be3v8IGkRZ9%2B5W5sJD%2FFYKV5pbsjywX3JtnvK7RXCEzBFlREZ9xFJ8k2ESoZSH1cYbTx9cBydi%2BoDs%2FM6s%3D" rel="nofollow" target="_blank">vue3 语法糖setup 兄弟组件传值</a>（👈点击直达）<br><a href="https://link.segmentfault.com/?enc=y2MTTGUS1j0dkMSjpLPXKQ%3D%3D.OPT105qDiMq9rYtTQ9tvfTSz1TPQu%2F9xY8G9qa9%2BuonCD5rCevvXOyRc6%2Bjki0M7F8UcR5jGkaXQf0YGuOFUS%2FTE91WDerCKU8G21%2F7NkNHEAluReOSm0%2BpWNbZAFeqd5RIdgYVGRCk70VxgZ65uCGjZnlb1cPDgoBrbzBS5lmgGmsdvFDH2KOUHO3Uhi%2FBav2zcj7%2FpeyDomxEApMC7fG0NJOCdOHEc3MG097cccghsm5Gx5o%2F4zDDcH0X9K8eobrAMHX%2FnnWTbFJC6Jyb9vlLQQBlLt1udBNRbQdMjWCdT6IWWAgArMaOjD74qlPl5F8gPEMdAiDLEZdpZWe2XNpRYt%2FJf06oAHTcbGCxcgjUiGFtTTYf5vGWwf8jrcZBJwTkfksbmE2t8HOMWMKXGojuDExYGlDlBkhb1Txg3oQ1PmE1eGbob3YXh7AdPfmq783fyeV3l2LmGhP6SomTllqSNFxk4aw4Kpuba9E9rMoFT2wJax8gyfpAALZbIjDorwY96mGMj4k3FpTNzzYGJD7%2BAyBwwdA4FWqLG8epfv2Exv6y4sRbNExaPOE48UyoyhumBb5evz%2FTINJbErgDA2g2gPVtzp1gUCJifVsND7Ys%3D" rel="nofollow" target="_blank">微信小程序wxs封装使用以及公共js组件封装</a> （👈点击直达）<br><a href="https://link.segmentfault.com/?enc=%2F5kv%2BL74IogwdoFhhSnJBQ%3D%3D.RoGxPFX%2FPUAQZ9k7CaZR61rqE8%2BXKWEskGcAJprSsYUpDrW2yo%2B263Uyq3SteDhxjaklTujop4nkckL3puR9Wl6q9DeHKWz5ErxHeZIwzfGIAtlCb7RAZQGLNPpKWT0gRL11PHlfhK3A0b%2Bndo6APYB%2F9CT76AkCsoWuP6v98RZLIOYiWpswQ47mYzu8IY1CoQVEb67N5MJ4FtgQyEZJMf%2FBLHCSVFwOinO9xNX%2B1%2B0YAnDevoIcHlTPdicP0rmJqIKzS6t15xID2nElMKtOFOAKuz2isXrongkdkB217wsxl0bAN%2BbT%2FSLJCMRLpldf%2BjfG0jwPlxNilVeiXDBVlnWgCXAoNHcoFbSA4KGl3N%2BpSt6M5mF6g9YFM6TE2eOXDTpruJRRyHMxthX3ZTByWXQFim4RlkCIizm2s5YQapLSambtghXXezqx36mpGS8povJypwOyhexi%2FHdfqZAvvSLr7Fe6avsDRgAAAcX8qclUv3V4iw0ILoMLTa6%2BGl4gi2d10zG%2Boih47kQXZSsgLRJi3rtIg%2FAnW%2F5Xsm14W3fdEjxalTfju5Qm1vQ7MVcKDvVBWq8kzoheaMjuX5rMTZD0ARxGgDKuZFb00ju21Mc%3D" rel="nofollow" target="_blank">微信小程序的全局弹窗以及全局实例</a>（👈点击直达）</p><p>如果觉得这篇文章对你有帮助，欢迎点赞👍、收藏💖、转发✨哦~</p>
