详细说明Vue中组件值传递的多种实现

vue中元件值传递模式的设置

1.我们最熟悉的是父子组件传递值

父子道具-父亲$emit，这是我们最常用的，就不多说了。如果有什么我们不懂的地方，我这里有一篇好文章，会提供链接~

https://www.cnblogs.com/LoveAndPeace/p/7273648.html2.兄弟或不相关组件之间的价值转移

我们最常用的方法是使用第三方变量，通常称为eventbus，发送一个$emit，接收另一个$on，这样就可以将组件传递给main.js进行挂载

在$emit的其中一页上

另一页$

是不是有点像我昨天写的pubsub？哈哈

3.attr和listener传递值(注意这两个只能向下传递)

在父组件中编写要传递给子组件的键名和键值，

通过子组件中的{{$attrs}}获取所有传递的值

直接拿到是不是很神奇~

效果：

通过子组件中的{{$attrs}}获取所有传递的值

子组件下面还有一些组件，可以由v-bind:'$attrs '传递，并由孙子组件中的{{$attrs}}获取

侦听器用于传递事件，其用法大致相同

我们设置了一个点击事件

在子元素中，在我们的控制台下，看看你是否得到它

然后，概括地说，在vue中的listeners事件传输的父组件中的子组件上写一个函数，如@log='log '，并在methods:{}中的当前页面上执行的语句子组件对应的单词中写一个触发器事件。如果点击='aaa '方法写：方法： { AAA(){这个。$听众。父组件的方法由此调用。$listeners.log ()}}如果子组件下有组件，使用on: ' $ listeners '然后向下传递。反应过来，继续用子成分获取法获取4。

但是！也不一样。在父组件引入的子组件上写ref='xxx '，您的父组件将获得一系列子组件，如数据、事件等

5.使用vuex不用说，数据是集中的，每个页面值都可以从彼此获得

将值设置为状态

通过stor.state.value获取值。

通过提交或调度提交给突变和动作可以进行数据通信处理等等.

6.通过提供设置，inject取值，但不建议使用此方法

举个栗子：

另一个组件

搞定~这是整理一些组件值的方法。刚来的时候，很多书面文章的格式不是很能调整，大家都可以凑合着用

摘要

以上是边肖介绍的Vue中组件值传递的多种实现。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！