vue2.0组件传值 bus

最新推荐文章于 2023-12-18 20:13:46 发布
最新推荐文章于 2023-12-18 20:13:46 发布
阅读量296 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41141811/article/details/119783832
版权
本文介绍了在Vue2.0中如何使用自定义事件总线（Bus）进行组件间的通信，详细阐述了Bus的创建和使用步骤，帮助开发者理解这一常见实践。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bus</title>
    <style>
        .item {
            overflow: hidden;
            padding: 10px;
            width: 400px;
            border: 1px solid red;
        }

        .item img {
            width: 100px;
            float: left;

        }

        .film {
            border: 1px solid black;
            height: 1500px;
        }

        .filminfo {
            width: 300px;
            min-height: 200px;
            background: yellow;
            position: fixed;
            right: 50px;
            top: 100px;
            border: 1px solid blue;
        }
    </style>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="getInfo">ajax</button>
        <movie v-for="item in movieList" :mymovie="item" :key="item.filmId"></movie>
        <moviedetail></moviedetail>    
    </div>
    <script>
        var bus = new Vue();
        Vue.component('movie', {
            template: `
            <div class="item">
                <img :src="mymovie.poster"/>
                <span>{
  {mymovie.name}}</span>
                <button @click="mvDetail()">详情</button>
            </div>`,
            props:["mymovie"],
            methods: {
                mvDetail () {
                    bus.$emit('Mdetail',this.mymovie.synopsis);
                }
            }
        })

        Vue.component("moviedetail",{
            data () {
                return {
                    Minfo: ''
                }
            },
            template: `
            <div class="filminfo">{
  {Minfo}}</div>`,
            mounted () {
                bus.$on("Mdetail",(data)=>{
                    console.log(data);
                    this.Minfo = data;
                })
            }
        })

        new Vue({
            el: '#app',
            data: {
                movieList: [],
            },
            methods: {
                getInfo () {
                    fetch("test.json")
                        .then(res => res.json())
                        .then(res => {
                            //console.log(res.data.films);
                            this.movieList = res.data.films
                        })
                },
                
                
            }
        })
    </script>
</body>

</html>

test.json

{
    "status": 0,
    "data": {
        "films": [{
            "filmId": 4645,
            "name": "尺八·一声一世",
            "poster": "https://pic.maizuo.com/usr/movie/c24fc5d02fa8df65456ee2a54d677e59.jpg",
            "actors": [{
                "name": "聿馨 ",
                "role": "导演",
                "avatarAddress": "https://pic.maizuo.com/usr/movie/c069afb64958d8eb1cbb57d822f5dbcb.jpg"
            }, {
                "name": "佐藤康夫",
                "role": " 自己",
                "avatarAddress": "https://pic.maizuo.com/usr/movie/f74cc4cacecf974cde84b51e86413471.jpg
最低0.47元/天 解锁文章
小黄鸭htt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「VUE架构」Vue2.0 EventBus父子组件通信（传参）
AIGC大前端小王子
07-17 1176
本文主要介绍Vue2.0之EventBus父子组件通信（传参），有别于之前的父子组件的传参都有着异曲同工之妙。 一、初始化 首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。 新创建一个 .js 文件，比如 eventBus.js 。文件目录建议放在根目录>>src>>assets>>js>> eventBus.js imp......
vue3.0中使用bus总线和vue2.0中使用bus总线
weixin_43267086的博客
07-20 715
Vue3.0集成Bus Vue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线 Vue3.0中使用emit来注册 bus.emit(‘事件’,参数) Vue3.0中使用on来监听，bus.on(‘taskLrowClick’, (e)=>{ console.log(e)；其他的逻辑操作 }) emit和on是成对出现的，一个发起，一个接收，并且接收方可以是多个组件，只要第一个参数匹配，都可以接收到 3.0，，2.0 3.0，，2.0 3.0，，...
vue bus组件传值
weixin_30672295的博客
05-21 200
父组件 event(){ this.$bus.emit("edit", title, item);)}//edit为对应的子组件名称，title,item为向子组件传的值 子组件 接收 在mounted this.$bus.on("edit", (title, obj) => { //title，obj为子组件接收的值 }); 子组件向父组件传值 this.$...
VUE2.0学习记录——非父子组件之间的传值(BUS/总线/发布订阅者模式/观察者模式)
baokx的专栏
08-13 197
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件之间的传值(BUS/总线/发布订阅者模式/观察者模式)</title> </head> <body> <div id="app"&...
vue中组件间 的传值 bus(vueBus公共交通)
sunshineTing2的博客
02-20 2598
第一步：创建 vueBus.js文件（在utils目录下） // vueBus.js import Bus from 'vue'; let install = function (Vue) { Vue.prototype.$bus = new Bus() } export default { install }; 第二步：在main.js中引入vueBus // main.js import vueBus from '@/utils/vueBus'; Vue.use(vueBus); 第三步：在.v
vue2.0 中央控制总线 Bus
weixin_45563734的博客
11-28 621
vue2.0 中央控制总线 Bus
vue2.0组件之间传值、通信的多种方式(干货)
01-21
这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/...
Vue2.0 组件传值通讯的示例代码
08-29
Vue2.0 组件传值通讯是Vue.js框架中非常重要的一个特性，它允许我们在组件之间有效地共享数据和触发交互。在本文中，我们将通过一个简单的评价组件示例来深入理解这一概念。 首先，我们分析组件设计思路： 1. **...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
Vue 2.0 子组件改变 props 值并向父组件传值的方法 在 Vue 2.0 中，子组件改变 props 值并向父组件传值是非常常见的需求。props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父...
Vue组件传值之bus总线
01-08
引言 在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，将bus(空Vue)定义成单独的文件Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 方法一： 在组件一中引入 import Bus from './Bus' export default { data() { return { ......
详解vue 组件之间使用eventbus传值
08-29
本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue - 全局组件之间传值（Bus）
技术共享，共同进步！
08-04 855
全局组件之间传值（Bus）
【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）
道阻且长，行则将至。
10-23 254
【代码】【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）
vue bus传值
weixin_46003800的博客
11-03 963
简述 : bus传值是两个组件之间的传值,适用兄弟组件之间的传值 1.utils中创建bus.js文件 import Vue from 'vue' const Bus = new Vue() export default Bus 2.在需要传值的组件中添加代码 A.vue页面 // 兄弟组件中的传值 import Bus from './utils/bus..js' // 在适当的时机通过this.$emit进行传参 methods:{ toBPage(){ Bus.$emit('val',data
Vue2$Bus组件传值
m0_63788547的博客
09-01 101
Vue2$Bus组件传值
vue2中使用事件总线（EventBus）传值
qq_43575827的博客
07-20 664
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
vue之间传值
weixin_zz的博客
12-10 345
一、父子传值 用props，父组件中传值自组件中用props收 父组件：                     子组件： 其中用cellData在父组件中传出去，在子组件中用props接受 总结一下： 1、子组件在props中创建一个属性，用以接收父组件传过来的值 2、父组件中注册子组件 3、在子组件标签中添加子组件props中创建的属性 4、把需要传给子组件的值赋给该属性   二...
VUE使用BUS进行兄弟组件传值
艾丽的博客
08-23 851
1.新建bus.js import Vue from 'vue' export default new Vue 2.在需要传值和接受值的vue文件中，各自引入bus.js import bus from '../../../utils/bus' // 在src目录的下面 3.定义传值的方法，使用bus.$emit(‘methodName’,data) 4.要接收值的组件里，使用bus.on(‘methodName’,val =>{ }) 5 具体示例如下所示 index.vue <temp
vue2传值方式总结 （十一种方法）
最新发布
m0_64590669的博客
12-18 2730
vue2传值方式总结 （十一种方法）
vue2.0 父子组件传值
05-01
Vue 2.0 中父子组件之间的传值可以通过属性(prop)和事件(event)实现。 1. 属性(prop)传递值 父组件通过在子组件上定义prop属性，指定要传递的值类型和名字，然后将值传递给子组件的prop属性。子组件通过props接收到父组件传递的值，可以直接使用。 例如：父组件中定义一个名为message的prop属性，值为字符串类型，在模板中通过子组件标签向子组件传递值。 ``` // 父组件 <template> <div> <child-component :message="hello"></child-component> </div> </template> <script> import ChildComponent from './child-component.vue' export default { components: { ChildComponent }, data () { return { hello: 'hello, world' } } } </script> // 子组件 <template> <div>{{ message }}</div> </template> <script> export default { props: { message: { type: String, require: true } } } </script> ``` 2. 事件(event)传递值 父组件通过定义一个事件，在子组件中触发该事件并传递需要传递的值。子组件在父组件中使用子组件自定义的事件，并获取到传递的值。 例如：子组件定义一个自定义事件，触发时传递一个字符串类型的值。父组件中使用子组件，同时监听子组件的自定义事件，在事件回调函数中获取到子组件传递的值。 ``` // 子组件 <template> <button @click="changeMessage()">改变消息</button> </template> <script> export default { methods: { changeMessage () { this.$emit('change', '新消息') } } } </script> // 父组件 <template> <div> <child-component @change="handleChange"></child-component> <div>{{ message }}</div> </div> </template> <script> import ChildComponent from './child-component.vue' export default { components: { ChildComponent }, data () { return { message: '旧消息' } }, methods: { handleChange (newValue) { this.message = newValue } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值