vue3實(shí)戰(zhàn)-子組件之間相互傳值問題
更新時(shí)間：2023年03月19日 15:33:46 作者：月影星云
這篇文章主要介紹了vue3實(shí)戰(zhàn)-子組件之間相互傳值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue3子組件之間相互傳值
1、引用第三方庫(kù)mitt
npm install mitt
2、在項(xiàng)目src文件夾下創(chuàng)建utils文件夾，在utils創(chuàng)建mitt.js，mitt.js中的代碼如下：
import mitt from "mitt"; export default new mitt();
3、示例：組件A傳值給組件B
//在組件A中引入
import mitt from "@/utils/mitt";
//調(diào)用傳值
mitt.emit("mittClick", "數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)");//在組件B中引入
import mitt from "@/utils/mitt";
//接收傳值
mitt.on("mittClick", (val) => {
?? ?console.log(val)//數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)
})vue不同組件之間相互傳值
使用一個(gè)空Vue實(shí)例來進(jìn)行傳值，通過$emit,$on即可。
<!DOCTYPE html>
<html lang="zh-CN">
? ? <head>
? ? ? ? <title></title>
? ? ? ? <meta charset="utf-8">
? ? ? ? <script src="./main/vue.js"></script>
? ? </head>
? ? <body>
? ? ? ? <div id="demo">
? ? ? ? ? ? <!-- test code -->
? ? ? ? ? ? <custom-a></custom-a>
? ? ? ? ? ? <custom-b></custom-b>
? ? ? ? ? ? <!-- test code -->
? ? ? ? </div>
? ? </body>
? ? <script type="text/javascript">
? ? let bus = new Vue();
? ? Vue.component("custom-a", {
? ? ? ? template: '<button @click="transValue">Click</button>',
? ? ? ? methods: {
? ? ? ? ? ? transValue: () => bus.$emit("transValue", "hello from a")
? ? ? ? }
? ? });
? ? Vue.component("custom-b", {
? ? ? ? template: '<input :value="msg">',
? ? ? ? data: function() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? msg: ""
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? bus.$on("transValue", msg => this.msg = msg)
? ? ? ? }
? ? });
? ? new Vue({
? ? ? ? el: "#demo"
? ? });
? ? </script>
</html>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文通過實(shí)例代碼給大家介紹了vue底部加載更多,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vuex模塊化用法?跨模塊調(diào)用的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-10-10
Nuxt3?使用?Vue.js?作為視圖引擎，Nuxt3?中提供了所有?Vue?3?功能，所以我們創(chuàng)建的Nuxt項(xiàng)目其實(shí)也是vue3項(xiàng)目，這篇文章主要介紹了Nuxt3重點(diǎn)特性使用舉例記錄,需要的朋友可以參考下2022-12-12
Vue3+Vite項(xiàng)目引入Bootstrap5、bootstrap-icons方式
這篇文章主要介紹了Vue3+Vite項(xiàng)目引入Bootstrap5、bootstrap-icons方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue項(xiàng)目中使用particles實(shí)現(xiàn)粒子背景效果及遇到的坑(按鈕沒有點(diǎn)擊響應(yīng))
為了提高頁面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁面的粒子背景效果，本文給大家分享在實(shí)現(xiàn)過程中遇到問題，需要的朋友一起看看吧2020-02-02
vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問題的解決方法,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了如何解決vue在ios微信"復(fù)制鏈接"功能問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue-cli提供的腳手架只是一個(gè)最基礎(chǔ)的，也可以說是Vue團(tuán)隊(duì)認(rèn)為的工程結(jié)構(gòu)的一種最佳實(shí)踐。這篇文章主要介紹了vue-cli的工程模板與構(gòu)建工具 ,需要的朋友可以參考下2018-09-09
vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09