vue2 -- 组件通信

大富翁 chen

于 2024-08-08 11:23:31 发布

阅读量624

点赞数 7

分类专栏： vue2 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/2302_79523175/article/details/140917059

版权

vue2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1. 自定义事件

自定义事件常用与给组件绑定，用于组件间通信。

1.1 绑定

绑定
两种绑定方式
触发
对应的两种触发方式
Student.vue

App.vue

1.2 解绑

解绑一个事件

在这里插入图片描述

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

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

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

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

触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件：this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

2. 全局时间总线

一种组件间通信的方式，适用于任意组件间通信。
安装全局事件总线：

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去解绑当前组件所用到的事件。

3. 消息订阅与发布_pubsub

消息订阅与发布我们选择使用pubsub-js这个库，
在这里插入图片描述

一种组件间通信的方式，适用于任意组件间通信，
使用步骤：

安装pubsub: npm i pubsub-js
引入：import pubsub from ' pubsub-js'

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

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

提供数据：pubsub.publish(‘xxx’,数据)
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去
<span style="color:red">取消订阅</span>
相比于全局时间总线，消息订阅与发布使用情况少。
注：
vue的开发者工具无法显示消息的订阅与发布（pubsub-js是第三方库），只能显示全局时间总线。

4. 插槽

默认插槽、具名插槽、作用域插槽笔记(转载)：
vue插槽之插槽的用法及作用域插槽详解

5.其他知识点

5.1 $nextTick

语法：this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行其指定的回调.
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

应用：表单DOM更新后再获取焦点。

5.2 过渡与动画

在这里插入图片描述
这个图片的效果可以通过过渡和动画两种方式实现。

5.2.1 动画

vue2 内置组件<transition></transition>

自己写好css样式，其中样式出现的样式css选择起叫做.v-enter-active(v为transition组件的默认name),离开的样式选择器叫做.v-leave-active；

其中，appear属性 – dom节点一出现就显示效果；

有多个transition组件出现时设置name，以区分不同样式。

动画实现代码：

h1(
background-color:orange;
}
.hello-enter-active{
animation:atguigu 0.5s linear;
}
.hello-leave-active{
animation:atguigu 0.5s linear reverse;
}
@keyframes atguigu {
from{
transform:translatex(-100%);
}
to{
transform:translatex(0px);
}
}

5.2.2 过渡

过渡实现代码：

h1(
background-color:orange;
// 进入的起点、离开的终点 //
.hello-enter,
.hello-leave-to{
transform:translatex(-100%);
}
.hello-enter-active,
.hello-leave-active{
transition:0.5s linear;
}
// 进入的终点、离开的起点 //
.hello-enter-to,.hello-leave{
transform:translatex(0);
}
</style>

注：

多个元素过渡：<transition>只能用于单个元素；<transition-group>用于多个元素，同时需要给每个元素添加key值；
集成第三方动画：animate.css包 animate.css

5.3 配置代理

同源协议：协议、主机、端口号都相同，其中有一个与请求路径不同即为跨域。
跨域处理方式：

CORS(一般是后端进行配置，开发常用)
jsonp – 前端通过script进行配置(面试题)
vue-cli 配置代理服务器

1. 方式一

在这里插入图片描述
本机页面端口号是8080,本地就会有一个8080的代理服务器，现在想要向5000端口发送请求，可以在vue.config.js中配置代理服务器：

//开启代理服务器
  devServer: {
    proxy: 'http://localhost:5000'
  }

将请求的端口号改为8080，那么再发送请求的时候如果在本地服务器上找不到想要的资源，就会到我们设置的代理服务器上寻找（服务器之间的请求不需要axios等，即不存在跨域）；

但这种方式有弊端，如果请求路径为http://localhost:8080/students，而本地服务器上有students文件，那么就不会再向5000服务器发送请求；

优点：配置简单，请求资源时直接发给前端(8080)即可.
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

但是下面这种代理方式强制在5000服务器上获取资源。

2. 方式二

devServer: {
    proxy: {
      '/atxinghuo': {
        target: 'http://localhost:5000',
        pathRewrite: { '^/atxinghuo': '' },
        //ws:true,//用于支持websocket
        //changeOrigin:true/用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
        pathRewrite: { '^/demo': '' },
        //ws:true,//用于支持websocket
        //changeOrigin:true//用于控制请求头中的host值
      },
    }
  }

请求：(强制走代理必须带有atxinghuo前缀)

axios.get('http://localhost:8080/atxinghuo/students').then(res => {
        console.log("请求成功了");
        console.log(res.data);
      }, err => {
        console.log("请求失败了", err);
      })