## 非父子组件通信

### 事件总线

非父子组件之间，进行简易消息传递，可以使用事件总线（Event Bus）。

使用步骤：

1. 创建一个都能访问的事件总线（空Vue实例，放到utils/EventBus.js）
2. A组件（接收方）监听Bus实例的事件（订阅消息）
3. B组件（发送方）触发Bus实例的事件（发布消息）

src\utils\EventBus.js文件：

    // 1. 创建一个都能访问的事件总线（空Vue实例）
    import Vue from 'vue'
    const Bus = new Vue()
    export default Bus

src\components\BaseA.vue文件：

    <template>
    <div>
    A组件（接收方）
    <p>{{ msg }}</p>
    </div>
    </template>
    <script>
    import Bus from '../utils/EventBus'
    export default {
    created() {
    // 2. A组件（接收方）监听Bus实例的事件（订阅消息）
    Bus.$on('sendMsg', (msg) => {
    this.msg = msg
    })
    },
    data() {
    return {
    msg: '',
    }
    },
    }
    </script>

src\components\BaseB.vue文件：

    <template>
    <div>
    B组件（发送方）
    <button @click="clickSend">发布通知</button>
    </div>
    </template>
    <script>
    import Bus from '../utils/EventBus'
    export default {
    methods: {
    clickSend() {
    // 3. B组件（发送方）触发Bus实例的事件（发布消息）
    Bus.$emit('sendMsg', '消息内容')
    },
    },
    }
    </script>

src\App.vue文件：

    <template>
    <div>
    <BaseA></BaseA>
    <br />
    <hr />
    <br />
    <BaseB></BaseB>
    </div>
    </template>
    <script>
    import BaseA from './components/BaseA.vue'
    import BaseB from './components/BaseB.vue'
    export default {
    components: {
    BaseA,
    BaseB,
    },
    }
    </script>

### provide和inject

作用是用来跨层级共享数据。

使用步骤：

1. 父组件provide提供数据
2. 子/孙组件inject取值使用

src\App.vue文件：

    <template>
    <div>
    App组件
    <br />
    <SonA></SonA>
    <br />
    <SonB></SonB>
    </div>
    </template>
    <script>
    import SonA from './components/SonA.vue'
    import SonB from './components/SonB.vue'
    export default {
    provide() {
    return {
    color: this.color, //简单类型（非响应式）
    userInfo: this.userInfo, //复杂类型（响应式）- 推荐
    }
    },
    data() {
    return {
    color: 'red',
    userInfo: {
    name: '张三',
    age: 18,
    },
    }
    },
    components: {
    SonA,
    SonB,
    },
    }
    </script>

src\components\SonA.vue文件：

    <template>
    <div>
    -SonA组件
    <GrandSon></GrandSon>
    </div>
    </template>
    <script>
    import GrandSon from './GrandSon.vue'
    export default {
    components: {
    GrandSon,
    },
    }
    </script>

src\components\GrandSon.vue文件：

    <template>
    <div>--GrandSon组件：{{ color }} - {{ userInfo.name }}</div>
    </template>
    <script>
    export default {
    inject: ['color', 'userInfo'],
    }
    </script>

src\components\SonB.vue文件：

    <template>
    <div>-SonB组件：{{ color }} - {{ userInfo.age }}</div>
    </template>
    <script>
    export default {
    inject: ['color', 'userInfo'],
    }
    </script>


Vue组件通信

## Screen Guru

是一个在线网页截图工具，能够帮助我们快速生成网站网页截图，无需注册登录即可使用。

该在线工具使用起来非常简单方便，只需要提供想要生成截图的网页网址URL，就可以为其生成网页截图，操作简单方便，相较于自己手动制作网页截图，这种操作方式更为高效。

## 网站地址

Screen Guru：[https://screen.guru/](https://screen.guru/)


Screen Guru-在线网页截图工具

## 跨域问题

CORS（Cross-Origin Resource Sharing，跨源资源共享），也叫跨域资源共享，是一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。

出现跨域问题的主要原因是同源策略的限制。同源策略是浏览器的一种安全策略，是浏览器的行为，而且只针对fetch、xhr请求。只要协议、主机、端口之一不一致，就不同源。

## 响应头解决

要实现CORS很简单，只需在服务端添加响应头：`Access-Control-Allow-Origin: *`

## 代理解决

前端服务器若是用express的话，只需安装一个插件：`npm i http-proxy-middleware --save-dev`，然后在express服务器启动代码中加入：

    import {createProxyMiddleware} from 'http-proxy-middleware'
    // ...
    app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }))


如何解决前后端分离跨域问题

## MyLens

是一款免费在线AI时间线生成工具，通过人工智能AI能够为任何主题生成时间线、时间轴，用户只需要输入主题，AI围绕主题生成对应的时间线，并且为每个时间节点添加详细信息，不过可能存在一些不准确之处，可以稍加修改微调，支持多种语言。

## 网站地址

MyLens：[https://mylens.ai/](https://mylens.ai/)


MyLens-AI时间线生成工具 为任何主题生成时间线

## 屋舍

是一个可靠永久免费支持外链的高速网盘，但文件大小为会员免费500MB，游客免费100MB。

可以将图片、文档等文件上传存储，并获取文件的共享链接，支持外链，访问速度很快，用户可以随时通过链接分享或查看文件，非常方便。

该免费网盘服务支持文档、图片、视频等各类文件，可以满足大部分用户便捷分享文件的需求，非常值得推荐使用。

## 网站地址

屋舍：[https://www.uhsea.com/](https://www.uhsea.com/)


屋舍-可靠永久免费支持外链的高速网盘

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。