1. Référencez la bibliothèque tierce mitt
npm install mitt
2 Créez un dossier utils sous le dossier src du projet et créez mitt.js dans utils Le code dans mitt. .js est le suivant :
import mitt from "mitt"; export default new mitt();
3. Exemple : le composant A transmet la valeur au composant B
//在组件A中引入
import mitt from "@/utils/mitt";
//调用传值
mitt.emit("mittClick", "数据数据数据");//在组件B中引入
import mitt from "@/utils/mitt";
//接收传值
mitt.on("mittClick", (val) => {
console.log(val)//数据数据数据
})Utilisez une instance Vue vide pour transmettre la valeur, transmettez simplement $emit, $ sur.
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre vue2.0 et 3.0
Quels sont les cycles de vie de vue3
La différence entre une demande d'obtention et une demande de publication
Comment se connecter au réseau local
utilisation de l'insertion Oracle
Quel est le système Honor ?
site web java en ligne
Comment désactiver l'invite de mise à niveau Win10
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
