2022-05-28Vue5 分钟读完 (大约 693 个字)

Vue组件通信的几种方式

组件的数据有三种形态：props，data，computed。

下面的方法要么是通过某种方法使得组件之间直接通信，要么是使用了第三方作为中转。

方法

props/$emit

可以实现父子组件之间的通信。

父组件通过 props 向子组件传递数据。

子组件通过 $emit 触发事件向父组件传递数据，父组件通过 v-on 监听这个事件从而获取子组件传递的数据。

代码省略。

事件中心

可以实现任何组件之间的通信。

通过new一个空的Vue实例作为事件中心，相当于是一个发布订阅。

var Event = new Vue();

// 触发指定事件并携带数据
Event.$emit(eventName, data);
// 监听指定事件并获取数据
Event.$on(eventName, (data) => {
    // get data
});

这里还可以使用一个发布订阅mudule叫pubsub，支持vue和react。

pubsub可以publish一个信息并携带一个payload，也可以subscribe一个信息并在回调函数的参数中获取payload。

也可以使用mitt.js，是一个事件总线库，用于跨组件通信。

vuex

可以实现任何组件之间的通信。

state存储数据，不能直接操作state，需要通过vuex的方法集操作state。
组件通过mutations操作state中的数据。
actions用于异步操作，最终提交mutations操作。

vuex数据持久化到localStorage。

将vuex数据持久化到locaStorage前要先JSON.stringify()为字符串。
将localStorage中的数据取出时要JSON.parse()为数组。

还可以使用Pinia。

attrs/listeners

hexo将标题两个 $ 包裹的部分渲染为了数学公式故而没写美元符号。

$attrs 对象：包含了父组件传递了但是子组件props中没有暴露的属性。
$listeners 对象：存放的是父组件中绑定的非原生事件。

provide/inject

祖父组件通过provide向后代组件传递变量，注意祖父组件的provide要写成工厂函数。
后代组件通过inject来注入变量。
祖父组件provide的变量是不会变动的。

使用 Vue.observable 可以实现祖父组件provide的变量改变后，后代组件inject的变量也能响应式的改变。

parent, children, ref

$parent 和 $children 用于访问父子组件实例。

ref 用于普通元素就是指向该DOM，如果用于组件就是指向组件实例，可以直接获取组件实例的所有数据方法。

ref

支付宝

微信