Vue框架总结（四、CLI编程组件通信）

已于 2022-08-09 20:34:33 修改
阅读量481 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-08-09 20:30:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51938362/article/details/126248000
版权

Vue

一、 props配置项

props配置项：

  • 功能：让组件接收外部传过来的数据

  • 传递数据：<Student name="xxx"/>

  • 接收数据：

① 第一种方式（只接收）：props:['name']

② 第二种方式（限制数据类型）：props:{name:String}

③ 第三种方式（限制类型、限制必要性、指定默认值）

props:{
	name:{
		type:String, 	//类型
		required:true,  //必要性
		default:'划水艺术家'  //默认值
	}
}

测试案例：

src/App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		<!--使用 props 传递数据-->
		<Student name="划水艺术家" age="20"></Student>
	</div>
</template>

src/components/Student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
export default {
	name:'Student',
	
	// 简单声明接收
	// props:['name','age']
	
	// 接收的同时对数据进行类型限制
	/* props:{
			name:String,
			age:Number
	} */

	// 接收的同时对数据进行类型限制 + 指定默认值 + 限制必要性
	props: {
		name: {
			type: String,
			required: true,
		},
		age: {
			type: Number,
			default: 99
		}
	}
}
</script>

在这里插入图片描述

props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

二、 父子组件通信

1. 父组件向子组件通信

子组件无法直接使用父组件中的数据，如果需要使用，则必须由父组件把数据传递给子组件才可以。
本质: 让子组件中的属性与父组件中的属性进行关联绑定, 然后子组件使用该属性, 这样才能做到数据传递。

测试案例：

在这里插入图片描述

src/components/Child.vue

<template>
	<div>
		<h1>子组件引用父组件数据</h1>
		<h2>姓名：{{name}}</h2>
		<h2>年龄：{{age}}</h2>
	</div>
</template>

<script>
export default {
	name: "Child",
	
	props:['name','age']

}
</script>

src/App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		
		<!--向子组件通信-->
		<Child name="划水艺术家" age="20"></Child>
	
	</div>
</template>

<script>

import Child  from "./components/Child";

export default {
	name: 'App',
	components: {
		Child
	},
}

</script>

在这里插入图片描述

2. 子组件向父组件通信

****

① 基础方法

子组件无法直接给父组件传递数据，也无法操作父组件中的数据，更无法调用父组件中的方法。
所以,，所谓的子组件向父组件通讯，其实就是想办法让子组件调用父组件的方法，进而响应到父组件中的数据。

测试案例：

src/components/Child.vue

<template>
	<div>
		<h1>子组件向父组件通信</h1>
		<h2>姓名：{{name}}</h2>
		<h2>年龄：{{age}}</h2>
		<button @click="childFunc">点我年龄 + 1 并将姓名传送至父组件 App</button>
	</div>
</template>

<script>
export default {
	name: "Child",
	
	// 其中 func 为父组件向子组件传递的方法
	props:['name', 'age', 'func'],
	
	methods:{
		childFunc(){
			// 调用父组件传递的方法
			this.func(this.name);
		}
	}
}
</script>

src/App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		
		<!--父组件给子组件传递必要参数以及函数便于子组件向父组件通信-->
		<Child name="划水艺术家" :age="age" :func="func"></Child>
		
	</div>
</template>

<script>


import Child  from "./components/Child";

export default {
	name: 'App',
	components: {
		Child
	},

	data() {
		return {
			age: 20
		}
	},
	
	methods:{
		func(name){
			this.age += 1
			console.log("子组件向父组件通信---name: ", name);
		}
	}
}

</script>

在这里插入图片描述

② 自定义事件

父组件可在子组件上绑定自定义事件，通过触发自定义事件，完成子组件向父组件通信。

组件的自定义事件：

  • 一种组件间通信的方式，适用于子组件向父组件通信

  • 绑定自定义事件：

方式①，在父组件中直接使用 v-on 或 @ 绑定自定义事件：

<Child @my-event="func"/> 
或 
<Child v-on:my-event="func"/>

方式②，在父组件中引用子组件时使用 ref 属性，选取合适时机为子组件绑定事件：

<Child ref="child"/>
<script>
	...
	mounted(){
		this.$refs.child.$on('my-event', func)
	}
</script>

  • 可在自定义事件上添加事件修饰符

  • 触发自定义事件：this.$emit('my-event', 数据...)

  • 解绑自定义事件：

// 解绑一个自定义事件
// this.$off('my-event')

// 解绑多个自定义事件
// this.$off(['my-event'])

// 解绑所有自定义事件
this.$off()

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

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

测试案例：

src/components/Child.vue

<template>
	<div>
		<h1>子组件向父组件通信</h1>
		<h2>姓名：{{name}}</h2>
		<h2>年龄：{{age}}</h2>
		<button @click="childFunc">点我年龄 + 1 并将姓名传送至父组件 App</button>
	</div>
</template>

<script>
export default {
	name: "Child",
	
	props:['name', 'age'],
	
	methods:{
		childFunc(){
			// 触发 Child 组件实例身上的 my-event 事件
			this.$emit("my-event", this.name);
		}
	}
}
</script>

src/App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		
		<!--父组件给子组件绑定自定义事件 （绑定事件使用 v-on 与 @ 均可）-->
		<Child name="划水艺术家" :age="age" v-on:my-event="func"></Child>
		
	</div>
</template>

<script>

import Child  from "./components/Child";

export default {
	name: 'App',
	components: {
		Child
	},

	data() {
		return {
			age: 20
		}
	},
	
	methods:{
		func(name){
			this.age += 1
			console.log("子组件向父组件通信---name: ", name);
		}
	}
}

</script>

在这里插入图片描述

③ 使用ref属性绑定自定义事件

在上述中绑定的自定义事件是当整个模板一被解析就直接绑定，当我们有些特别的需求，例如：在页面完成挂载5秒后才绑定事件，就需要使用ref属性。

测试案例：
与②中大致相同，只是绑定自定义事件的方式略有变化

src/App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		
		<!--父组件给子组件绑定自定义事件 （使用 ref ）-->
		<Child name="划水艺术家" :age="age" ref="child"></Child>

	</div>
</template>

<script>

import Child  from "./components/Child";

export default {
	name: 'App',
	components: {
		Child
	},

	data() {
		return {
			age: 20
		}
	},
	
	methods:{
		func(name){
			this.age += 1
			console.log("子组件向父组件通信---name: ", name);
		}
	},

	// 当页面挂载完毕5秒后给 child 组件绑定事件
	mounted(){
		setTimeout(()=>{
			this.$ref.child.$on("my-event", this.func);
		}, 5000);
	}
}

</script>

④ 自定义事件的解绑

给哪个组件绑定的事件，就在哪个组件中完成解绑。
在上述案例中，所定义的自定义事件my-event是给Child组件绑定的，因此若想要解绑，则在Child组件中完成。

src/components/Child.vue

<template>
	<div>
		<h1>子组件向父组件通信</h1>
		<h2>姓名：{{name}}</h2>
		<h2>年龄：{{age}}</h2>
		<button @click="childFunc">点我年龄 + 1 并将姓名传送至父组件 App</button>
		
		<button @click="unbind">解绑自定义事件</button> 
		
	</div>
</template>

<script>
export default {
	name: "Child",
	
	props:['name', 'age'],
	
	methods:{
		childFunc(){
			// 触发 Child 组件实例身上的 my-event 事件
			this.$emit("my-event", this.name);
		},
		unbind(){
			// 解绑一个自定义事件
			// this.$off('my-event')
			
			// 解绑多个自定义事件
			// this.$off(['my-event'])
			
			// 解绑所有自定义事件
			this.$off()
		}
	}
}
</script>

三、全局事件总线

全局事件总线（GlobalEventBus）：

  • 一种组件间通信的方式，适用于任意组件间通信
  • 本质上就是一个对象。它必须满足以下条件：
    ① 所有的组件对象都必须能看见他
    ② 这个对象必须能够使用$on、$emit和$off方法去绑定、触发和解绑事件

使用步骤：

  • 安装全局事件总线：
new Vue({
	...
	beforeCreate() {
		//安装全局事件总线 
		Vue.prototype.$bus = this 
	},
	...
})
  • 使用事件总线：

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

export default {

	methods(){
		// 自定义绑定事件的回调函数
		rollbackFunc(data){...}
	}
	
	...
	mounted() {
		// 当页面挂载完成时给当前组件绑定自定义事件
		this.$bus.$on('xxx',this.rollbackFunc)
	}
}

② 提供数据：this.$bus.$emit('xxx',data)

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

测试案例：

在这里插入图片描述

案例中将在App.vue中使用Child1与Child2组件，Child1与Child2组件互为兄弟组件，以下将展示两者如何进行通信。

src/main.js

import Vue from 'vue'
import App from './App.vue'

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

src/components/Child1.vue

<template>
	<div>
		<h1>兄弟组件通信 Child-1</h1>
		<h2>Child-1 姓名：{{name}}</h2>
		<h2>Child-1 年龄：{{age}}</h2>
	</div>
</template>

<script>
export default {
	name: "Child",
	
	data(){
		return{
			name: "Child-1",
			age: 10
		}
	},
	
	methods:{
		demo(data){
			console.log("我是 Child-1 组件，我收到的数据 = ", data);
		}
	},
	
	mounted() {
		// 当页面挂载完毕为 Child1 组件绑定事件
		this.$bus.$on("my-event", this.demo)
	},
	
	beforeDestroy() {
		// 销毁前取消 Child1 组件的绑定事件
		this.$bus.$off('my-event')
	}

}
</script>

src/components/Child2.vue

<template>
	<div>
		<h1>兄弟组件通信 Child-2</h1>
		<h2>Child-2 姓名：{{name}}</h2>
		<h2>Child-2 年龄：{{age}}</h2>
		
		<button @click="sendData">点我向Child-1发送数据</button>
	</div>
</template>

<script>
export default {
	name: "Child2",
	
	data(){
		return{
			name: "Child-2",
			age: 20
		}
	},
	
	methods:{
		sendData(){
			// 触发事件
			this.$bus.$emit("my-event", this.name);
		}
	}
}
</script>

src/App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		
		<Child1></Child1>
		<hr>
		<Child2></Child2>
		
	</div>
</template>

<script>

import Child1  from "./components/Child1";
import Child2 from "./components/Child2";

export default {
	name: 'App',
	components: {
		Child1,
		Child2,
	}
}
</script>

在这里插入图片描述

四、消息订阅与发布

消息订阅与发布（pubsub）：

  • 消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信

使用步骤：

  • 安装 pubsub-js
npm i pubsub-js
  • 引入
import pubsub from 'pubsub-js'
  • 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
export default {
	methods(){
		// 定义回调函数
		rollbackFunc(msgName, data){...}
	}
	...
	mounted() {
		this.pid = pubsub.subscribe('xxx', this.rollbackFunc);
	}
}
  • 提供数据
pubsub.publish('xxx', data)
  • 取消订阅
pubsub.unsubscribe(pid)

测试案例：

src/components/Child1.vue

<template>
	<div>
		<h1>兄弟组件通信 Child-1</h1>
		<h2>Child-1 姓名：{{name}}</h2>
		<h2>Child-1 年龄：{{age}}</h2>
	</div>
</template>

<script>
export default {
	name: "Child",
	
	data(){
		return{
			name: "Child-1",
			age: 10
		}
	},
	
	methods:{
		demo(msgName, data){
			console.log("我是 Child-1 组件，我收到的数据 = ", data);
			console.log("其中 msgName = ", msgName)
		}
	}
	
	mounted() {
		// 当页面挂载完毕 Child1 组件订阅消息
		console.log("订阅消息")
		this.pid = pubsub.subscribe("my-event", this.demo)
	},
	
	beforeDestroy() {
		//取消订阅
		pubsub.unsubscribe(this.pid ) 
	}
}
</script>

src/components/Child2.vue

<template>
	<div>
		<h1>兄弟组件通信 Child-2</h1>
		<h2>Child-2 姓名：{{name}}</h2>
		<h2>Child-2 年龄：{{age}}</h2>
		
		<button @click="sendData">点我向Child-1发送数据</button>
	</div>
</template>

<script>
export default {
	name: "Child2",
	
	data(){
		return{
			name: "Child-2",
			age: 20
		}
	},
	
	methods:{
		sendData(){
			// 发布消息
			pubsub.publish("my-event", this.name)
		}
	}
}
</script>

src/App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		
		<Child1></Child1>
		<hr>
		<Child2></Child2>
		
	</div>
</template>

<script>

import Child1  from "./components/Child1";
import Child2 from "./components/Child2";

export default {
	name: 'App',
	components: {
		Child1,
		Child2,
	}
}
</script>

在这里插入图片描述

划水yi术家
关注
专栏目录
vue框架使用
qq_45645848的博客
01-11 1149
前端vue基础知识总结，汇总
一个使用vuecli3搭建的基础后台模板集成常用组件功能模块
08-09
首先，Vue.js是前端开发中的一个流行框架，由尤雨溪开发，它采用了组件化、声明式编程方式，使得代码结构清晰，易于维护。VueCLI3是Vue.js的官方脚手架，它提供了一套自动化构建工具，包括项目初始化、热重载、代码...
Vue理解之路：在vuecli脚手架中进行组件通信
qq_51066068的博客
07-23 153
举一个最简单webcli脚手架中页面父子组件通信的例子
vue_cli组件通信个人总结--完整代码
码上暴富
05-04 283
vue_cli组件通信个人总结父传子子传父兄弟传vuex 父传子 在父组件中，通过给子组件加上自定义属性将数据传递给子组件。 在子组件中，通过props来接收子组件传递的数据。 在父组件中： <template> <div class="parent"> <!-- 在父组件中，通过给子组件加上自定义属性将数据传递给子组件 --> <ChildrenA :myData="123"></ChildrenA> </div&g
理解框架之Vue组件通信
weixin_41293999的博客
05-22 209
组件通信方式： props / $emit $emit / $on vuex $attrs / $listenters procvide / inject $parent / $children $root & refs props / $emit 最常用的父子组件通信方式。 父组件通过props传递数据给子组件，子组件通过emit发送事件传递数据给父组件。父组件向子组件传值，通过绑定属性来向子组件传入数据，子组件通过 Props 属性获取对应数据。 特点：符合单向数...
Vue2的vue-cli组件通信
Qiuxuntao的博客
12-14 1282
文章目录一、父亲向儿子通信二、儿子向父亲通信三、兄弟通信 一、父亲向儿子通信 二、儿子向父亲通信 三、兄弟通信
组件通信和cli的安装使用
weixin_44937463的博客
05-29 159
组件通信 – 单项数据流 >9种 1. 父子组件通信： 父组件将自己的数据传递给子组件 父组件将自己的数据通过属性绑定的形式传递给子组件 <Son :aa = "money"></Son> 子组件在自己的配置项中通过 props 来接收这个属性 Vue.component('Son',{ template: '#son', // props: ['aa']...
vue2与vue3的使用区别与组件通信
最新发布
09-12
本篇文章将深入探讨Vue2和Vue3在使用上的主要区别以及组件通信的方法。 ### Vue2与Vue3的区别 #### 1. Composition API Vue2 使用的是 Options API，所有组件选项如 data、methods、computed 等都直接在组件选项...
vue组件化编程-todoList案例.zip
07-14
- 如果待办事项列表在多个组件之间共享，可能使用Vue的内置状态管理工具`Vuex`，或简单的父子组件通信方式。 7. **路由管理**： - 如果项目涉及多页面，可能会使用`vue-router`来管理路由，实现页面间的导航。 8...
手把手教你用vue-cli搭建vue项目
04-07
### 手把手教你用vue-cli搭建vue项目 在前端开发领域，**Vue.js**作为一款轻量级且功能强大的框架，被广泛应用于构建用户界面。本文将详细介绍如何使用`vue-cli`工具快速搭建一个Vue项目，并对项目结构及常用配置...
vue中$refs, $emit, $on, $once, $off的使用详解
coldriversnow的专栏
06-06 2433
只能监听自定义事件。
vue-cli工程下组件之间的通信
su的博客
08-21 8261
vue组件之间的通信包括三种： 1.父组件向子组件通信 2.子组件向父组件通信 3.同级组件之间的通信 首先，看一下vue-cli工程的部分目录： 说明一下：App.vue是父组件，ZiZuJianOne.vue和ZiZuJianTwo.vue是子组件，两个子组件是在父组件App.vue里注册的。 ①父组件App.vue如何向子组件ZiZuJianOne.vue通信的 父组...
vue-router和vue-cli以及组件之间的传值
热门推荐
老虎帅呆了的博客
01-05 2万+
首先简单介绍使用vue-router的四个基本步骤：（为了方便演示，所有代码都写在一个文件里） 1.定义组件 2.定义路由 3.创建router实例并将定义好的路由传入 4.创建和挂载根实例 再来说一下vue-cli 一、安装vue-cli脚手架工具 cnpm install vue-cl
vue-cli 工程中 非父子组件通信 之 兄弟组件通信 bus的使用
冲锋
04-30 1244
首先借鉴官方文档 有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线： var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... }) 具体怎...
Vue2.0组件之间通信
大灰狼的小绵羊哥哥的博客
03-01 1万+
Vue中组件这个特性让不少前端er非常喜欢，我自己也是其中之一，它让前端的组件式开发更加合理和简单。笔者之前有写过一篇Vue2.0子父组件通信，这次我们就来聊一聊平级组件之间的通信。 首先我们先搭好开发环境，我们先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦) 环境搭建步骤： 打开git ，运行 npm install --global vue-cli
vue-cli 组件之间的通信
Joker_DJ
04-26 326
通信基本原则 不要在子组件中直接修改父组件的状态数据 数据和处理数据的函数应该在同一模块内 组件通信常用方式 props 自定义事件 slot插槽 消息订阅与发布 vuex 组件通信方式1-props 在组件内声明所有的 props 只指定名称 props: [‘name’, ‘age’, ‘logDog’] 指定名称和类型 props: { name: String, age: Nu...
Vue-cli中非父子组件之间通信
勤勇的博客
08-01 638
首先在main.js创建一个中转站，并且暴露出来。 //非父子组件通信中心 const vueEvent=new Vue(); export default vueEvent; 然后在自己的页面Page.vue中引入进来（路径自行更改） import vueEvent from '../../../main' 当前页面的组件,点击的时候发送数据为a标签的内容，在mounted方法里面 ...
Vue框架
qq_37933128的博客
07-31 2万+
Soc原则：关注点分离原则Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据网络通信 ： axios页面跳转 ： vue-router状态管理：vuexVue-UI : ICE , Element UI太简单，略  CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：  这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使
Vue.js面试详解：MVVM、组件通信与优化策略
相比于jQuery等传统库，Vue采用数据驱动的方式，它更注重组件化和声明式编程，开发者无需直接操作DOM，而是通过数据的改变来影响视图。这使得代码更易于理解和维护，尤其在大型项目中优势明显。 4. **Vue的优点** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值