vue父子组件间通信

617035918 发布于2019-08-23 11:51 / 2063人阅读

摘要：为此可以使用为子组件指定一个索引。访问子组件当和一起使用时，是一个数组或对象，包含相应的子组件。

父子通信目前有四种方式：

1.父组件传递数据给子组件
父组件数据如何传递给子组件呢？可以通过props属性来实现
父组件：

 //这里必须要用 - 代替驼峰data(){ return { msg: [1,2,3] };}

子组件通过props来接收数据:
方式1：
props: ["childMsg"]

方式2 :
props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告}

props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 }}
这样呢，就实现了父组件向子组件传递数据.

2.子组件与父组件通信
那么，如果子组件想要改变数据呢？这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发自定义事件来通知父组件改变数据，从而达到改变子组件数据的目的.

使用 v-on 绑定自定义事件
每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

子组件:
``
methods: { up() { this.$emit("resultChange","hehe"); //主动触发resultChange方法，"hehe"为向父组件传递的数据 }}

父组件:

//监听子组件触发的upup事件,然后调用change方法

methods: { mychangHandle(msg) { this.msg = msg; }}

触发事件使用驼峰格式的自定义事件名称，在父组件中就可以使用on-evnet-name的形式来监听。

3.任意组件间通信
如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信.
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.
使用一个空的 Vue 实例作为中央事件总线：

let Hub = new Vue(); //创建事件中心,注意Hub要放在全局

组件1触发：

methods: { eve() { Hub.$emit("change","hehe"); //Hub触发事件 }}

组件2接收:

created() { Hub.$on("change", () => { //Hub接收事件 this.msg = "hehe"; });}

4. $refs
尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID 。

var parent = new Vue({ el: "#parent" })
// 访问子组件
var child = parent.$refs.profile

当 ref 和 v-for 一起使用时， ref 是一个数组或对象，包含相应的子组件。

云服务器 GPU云服务器 vue父子组件通讯父子组件通信父子组件父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97575.html

Vue 组件间通信方式

摘要：本身提供哪几种通信方式首先灵感源于，支持双向绑定，本质还是单向数据流。跟一样，组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用，因为组件可以自定义事件，即后面的组件间通信方式其实就是订阅发布模式。例子是在 jsrun.net 平台编写，不支持移动端平台，所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数...

hss01248 2019-08-26 13:54 评论0 收藏0
Vue2.0父子组件间事件派发机制

摘要：从过来的都知道，在中，父子组件间事件通信的和被移除了。通过广播和事件分发的机制，就显得比较混乱了。在父组件中中然后，在子组件中，主要在任意事件回调中使用来触发自定义的事件，后面还可以加上参数传给父组件。从vue1.x过来的都知道，在vue2.0中，父子组件间事件通信的$dispatch和$broadcase被移除了。官方考虑是基于组件树结构的事件流方式实在是让人难以理解，并且在组件结...

xietao3 2019-08-21 18:40 评论0 收藏0
Vue.js 父子组件及非父子组件间实现通信

摘要：想使用值的话通过进行处理非父子组件间通信创建事件中心组件触发组件接收 1. 父组件与子组件通信父组件showImg(https://segmentfault.com/img/remote/1460000013945460); 子组件通过props来接收数据: 格式1： props: [childMsg] 格式2 : props: { childMsg: Array //指定...

lentrue 2019-08-22 15:40 评论0 收藏0
vue组件间通信、数据传递（父子组件，同级组件）

总结一下对vue组件通信的理解和使用。一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 父组件 app.vue 请输入单价: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 评论0 收藏0