vue3子组件之间相互传值问题怎么解决

2023-07-05 13:07:30 733人浏览薄情痞子

摘要

这篇文章主要介绍“vue3子组件之间相互传值问题怎么解决”，在日常操作中，相信很多人在Vue3子组件之间相互传值问题怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3子组件之间相互传值问题怎么解决

这篇文章主要介绍“vue3子组件之间相互传值问题怎么解决”，在日常操作中，相信很多人在Vue3子组件之间相互传值问题怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3子组件之间相互传值问题怎么解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

vue3子组件之间相互传值

引用第三方库mitt

npm install mitt

在项目src文件夹下创建utils文件夹，在utils创建mitt.js，mitt.js中的代码如下：

import mitt from "mitt";export default new mitt();

示例：组件A传值给组件B

//在组件A中引入import mitt from "@/utils/mitt";//调用传值mitt.emit("mittClick", "数据数据数据");

//在组件B中引入import mitt from "@/utils/mitt";//接收传值mitt.on("mittClick", (val) => {    console.log(val)//数据数据数据})

vue不同组件之间相互传值

使用一个空Vue实例来进行传值，通过$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>

到此，关于“vue3子组件之间相互传值问题怎么解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue3子组件之间相互传值问题怎么解决

本文链接: https://www.lsjlt.com/news/352089.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341