1. Toy模板网首页
  2. > Toy博客

07-Vue技术栈之(组件之间的通信方式)

10月前 作者：东方青云、 分类：Toy博客 阅读(93) 违法举报

这篇具有很好参考价值的文章主要介绍了07-Vue技术栈之(组件之间的通信方式)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：
组件之间通信的方式有很多种，比如props、自定义事件、全局事件总线、消息订阅与发布、父链与子组件索引、插槽、Vuex等都可以实现组件之间的通信。在这里我将介绍以下三种通信方式。

1、组件的自定义事件

  • 它是一种组件间通信的方式，适用于：子组件 ===> 父组件
  • 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

1.1 绑定自定义事件：

1.1.1 第一种方式

  • 在父组件中：<Demo @dome="test"/>或 <Demo v-on:dome="test"/>
  • 触发自定义事件：this.$emit('dome',数据)

代码示例：

app组件

<template>
  <div>
    <h1 class="title">你好啊</h1>
    <Student @dome="test" />
  </div>
</template>

<script>
import Student from "./components/Student";
export default {
  name: "App",
  components: { Student },
  methods: {
    test() {
      console.log("我被触发了");
    },
  },
};
</script>

<style scoped>
</style>

子组件student

<template>
  <div class="demo">
    <button @click="domes">点我触发</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  methods: {
    domes() {
      this.$emit("dome");
    },
  },
};
</script>

<style scoped>
</style>

1.1.2 第二种方式

在父组件中：

 	<Demo ref="xxx"/>
      ......
      mounted(){
         this.$refs.xxx.$on('demo',this.test)
      }

代码示例：

app组件

<template>
  <div>
    <h1 class="title">你好啊</h1>
    <!-- <Student @dome.once="test" /> -->
    <Student ref="student" />
  </div>
</template>

<script>
import Student from "./components/Student";
export default {
  name: "App",
  components: { Student },
  methods: {
    test() {
      console.log("我被调用了");
    },
  },
  mounted() {
    this.$refs.student.$on("dome", this.test);
  },
};
</script>

<style scoped>
</style>

子组件student

<template>
  <div class="demo">
    <button @click="domes">点我触发</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  methods: {
    domes() {
      this.$emit("dome");
    },
  },
};
</script>

<style scoped>
</style>

注意：通过this.$refs.xxx.$on('dome',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

代码示例：

  mounted() {
    this.$refs.student.$on("dome", function() {
		 console.log(this);
		 this指向子组件student
		 将普通函数换成箭头函数，this指向就还是原来的app组件
	});
  },

1.1.3 自定义事件只触发一次

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
代码示例：

  1. once修饰符使用方法

代码示例：
app组件

<template>
  <div>
    <h1 class="title">你好啊</h1>
    <Student @dome.once="test" /><!--绑定自定义事件，一次性 -->
    <!-- <Student ref="student" /> -->
  </div>
</template>

<script>
import Student from "./components/Student";
export default {
  name: "App",
  components: { Student },
  methods: {
    test() {
      console.log("我被调用了");
    },
  },
 /*  mounted() {
    this.$refs.student.$on("dome", this.test);
  }, */
};
</script>

<style scoped>
</style>
  1. $once使用方法

代码示例：
app组件

<template>
  <div>
    <h1 class="title">你好啊</h1>
    <!-- <Student @dome.once="test" /> -->
    <Student ref="student" />
  </div>
</template>

<script>
import Student from "./components/Student";
export default {
  name: "App",
  components: { Student },
  methods: {
    test() {
      console.log("我被调用了");
    },
  },
  mounted() {
    this.$refs.student.$once("dome", this.test);//绑定自定义事件（一次性）
  },
};
</script>

<style scoped>
</style>

1.2 解绑自定义事件

  • 解绑自定义事件通过this.$off('atguigu')

代码示例：
app组件

<template>
  <div>
    <h1 class="title">你好啊</h1>
    <Student @dome="test" @dome2="test2"/>
    <!-- <Student ref="student" /> -->
  </div>
</template>

<script>
import Student from "./components/Student";
export default {
  name: "App",
  components: { Student },
  methods: {
    test() {
      console.log("我被调用了");
    },
    test2() {
      console.log("我是第二个事件");
    },
  },
  /* mounted() {
    this.$refs.student.$on("dome", this.test);
  }, */
};
</script>

<style scoped>
</style>

子student组件

<template>
  <div class="demo">
    <button @click="domes">点我触发</button>
	<button @click="unbind">点我解绑事件</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  methods: {
    domes() {
      this.$emit("dome");
      this.$emit("dome2");//绑定多个自定义事件
    },
	unbind() {
		// this.$off("dome")//解绑一个自定义事件
		// this.$off(['dome','dome2'])//解绑多个自定义事件
		this.$off()//解绑所有的自定义事
	}
  },
};
</script>

<style scoped>
</style>

1.3绑定原生DOM事件

  • 组件上也可以绑定原生DOM事件，需要使用native修饰符。如果不加上native修饰符，Vue会默认将此事件当作自定义事件。

代码示例：

    <Student @click.native="xxx"/>

1.4 总结

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

    1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

    2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

    3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('atguigu',数据)

  5. 解绑自定义事件this.$off('atguigu')

  6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

2、全局事件总线（GlobalEventBus）

  • 一种组件间通信的方式，适用于任意组件间通信。

  • 安装全局事件总线：

    new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

  • 使用事件总线：

  • 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

    methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

  • 提供数据：this.$bus.$emit('xxxx',数据)

  • 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

2.1 应用全局事件总线

  • 我们利用全局事件总线来完成一个兄弟间的通信

目录结构图：
07-Vue技术栈之(组件之间的通信方式)

代码示例：

在main文件里面安装全局事件总线

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

没有涉及到和app组件通信，所以app组件正常编写即可

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
			}
		}
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

由于我们将school组件作为接受数据方，所以我们要给school组件种的$bus绑定自定义事件，事件的回调留在school组件自身。

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'东方',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})
		},
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

由于我们将student组件作为提供数据方，所以我们要在student组件中调用自定义事件

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

3、 消息订阅与发布（pubsub）

  1. 一种组件间通信的方式，适用于任意组件间通信。

  2. 使用步骤：

    1. 安装pubsub：npm i pubsub-js

    2. 引入: import pubsub from 'pubsub-js'

    3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

      methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

    4. 提供数据：pubsub.publish('xxx',数据)

    5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

3.1 应用消息订阅与发布

  • 将上面的全局事件总线案例应用消息订阅与发布的方法实现一下，整体思路是一样的。

目录结构图：

07-Vue技术栈之(组件之间的通信方式)

首先我们先要安装pubsub：npm i pubsub-js，然后在需要通信的组件中引入import pubsub from 'pubsub-js'这个包。

代码示例：
main文件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
})

app组件

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},

	data() {
		return {
				msg:'你好啊！',
			}
		}
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

school组件作为接受信息订阅方

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'School',
		data() {
			return {
				name:'东方',
				address:'北京',
			}
		},
		mounted() {
			this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
				console.log(this)
				// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
			})
		},
		beforeDestroy() {
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

student组件作为发布信息方文章来源地址https://www.toymoban.com/news/detail-472161.html

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {

		},
		methods: {
			sendStudentName(){
				pubsub.publish('hello',666)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

到了这里，关于07-Vue技术栈之(组件之间的通信方式)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue中 组件间的通信

    Vue中 组件间的通信

    引入 父组件==子组件 子组件==父组件 全局事件总线 消息订阅与发布 你知道Vue中组件之间应该如何进行通信吗？这里面就涉及到了多个关系了，父子之间互传、兄弟之间互传、子孙之间互传，甚至是任意的组件之间传递...... 是不是感觉有点头皮发麻。没关系，本文将带领大家

    2024年02月13日
    浏览(45)
  • SpringCloud 微服务系列——【服务间的通信方式、OpenFeign、Hystrix组件使用】

    SpringCloud 微服务系列——【服务间的通信方式、OpenFeign、Hystrix组件使用】

    ✅作者简介：2022年 博客新星 第八 。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏：SpringCloud 微服务学习专栏 ✨特色专栏：国学周更-心性养成之路 🥭本文内容：SpringCloud 微服

    2023年04月24日
    浏览(42)

  • 微信小程序父子组件之间通信的 3 种方式

    父子组件之间通信的 3 种方式 ① 属性绑定 ⚫ 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据 ② 事件绑定 ⚫ 用于子组件向父组件传递数据，可以传递任意数据 ③ 获取组件实例 ⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以直

    2024年02月09日
    浏览(48)
  • Vue兄弟组件之间的通信：

    Vue兄弟组件之间的通信：

    思路： 通过中间人父组件进行通信； 子组件先传给父组件，然后父组件再传给另一个子组件；  结果：   注意： console.log(res.json())的结果是promise对象； 图示： 要通过res接收res.json()结果才是data数据；  结果：   子组件传给父组件的data，是一个临时变量，如果父组件想用，

    2024年02月11日
    浏览(47)

  • 浅谈Vue组件之间的通信

    父子组件通信 ： 父组件向子组件传递数据 ：可以通过 props 属性向子组件传递数据。 子组件向父组件传递数据 ：可以通过 $emit 方法触发一个自定义事件，并在父组件中监听这个事件。 在父组件中： 兄弟组件通信 ： 可以使用共同的父组件作为中介，父组件通过 props 向子组

    2024年02月22日
    浏览(41)
  • VUE 父子组件、兄弟组件 之间通信 最强详解

    VUE 父子组件、兄弟组件 之间通信 最强详解

    目录 1. 父组件 调用 子组件 内参数/方法 1.1 通过 ref 调用/获取 子组件内参数/方法 2. 子组件 调用 父组件 内参数/方法 2.1 通过 emit 调用 父组件方法 2.2 通过 props 调用 父组件方法/参数 2.3 通过 this.$parent 调用 父组件方法/参数 3. 兄弟组件 通信 3.1 通过 bus 进行 兄弟组件 通信

    2024年02月05日
    浏览(61)
  • Vue3 组件之间的通信

    Vue3 组件之间的通信

    经过前面几章的阅读，相信开发者已经可以搭建一个基础的 Vue 3 项目了！ 但实际业务开发过程中，还会遇到一些组件之间的通信问题，父子组件通信、兄弟组件通信、爷孙组件通信，还有一些全局通信的场景。 这一章就按使用场景来划分对应的章节吧，在什么场景下遇到问

    2023年04月08日
    浏览(44)
  • vue组件之间的通信都有哪些？

    vue组件之间的通信都有哪些？

    vue组件之间的通信都有哪些？ 父子组件通信： Props：父组件通过props将数据传递给子组件，子组件通过props接收父组件传递的数据。 Events：子组件通过$emit触发事件，并将数据传递给父组件，父组件通过监听子组件的事件来接收数据。 兄弟组件通信： 共同的父组件作为中介：

    2024年02月06日
    浏览(48)
  • Web前端 ---- 【Vue】（组件）父子组件之间的通信一文带你了解

    Web前端 ---- 【Vue】（组件）父子组件之间的通信一文带你了解

    目录 前言 父组件传子组件 ---- props 给要传递数据的子组件绑定要传过去的属性及属性值 在子组件中使用props配置项接收 props配置项 子组件传父组件 ---- 组件的自定义事件 子组件向父组件传递数据 通过代码来绑定自定义事件 本文将介绍在Vue中父子组件如何进行通信 这里先介

    2024年02月05日
    浏览(117)
  • 【Vue3】3-3 : 组件之间是如何进行互相通信的

    【Vue3】3-3 : 组件之间是如何进行互相通信的

    本书目录：点击进入 一、组件之间为什么要做通信 二、组件之间通信方式 2.1、父传子：由传递属性实现 stage 1：申明 （即定义） stage 2：注册 stage 3：使用 【示例】：父组件将 title 和 count 传递给子组件 （普通数据 和 响应式数据的传递） ＞  代码  ＞  效果 2.2、子传父

    2024年01月17日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包