vue中父子组件通信的坑

转自：https://www.cnblogs.com/goloving/p/8660407.html

当在一个组件中，使用了其他自定义组件时，就会利用子组件的属性和事件来和父组件进行数据交流。

父子组件之间的通信就是 props down, events up，父组件通过属性props向下传递数据给子组件，子组件通过事件 events 给父组件发送消息。

子组件需要某个数据时，就在内部定义一个prop属性，父组件就像给HTML元素指定特定值一样，把自己的data属性传递给子组件的这个属性。

而子组件内部发生什么事情的时候，就通过自定义事件来把这个事情涉及到的数据暴露出来，供父组件处理。

<my-component v-bind:foo="baz"  v-on:event="doThis(arg1,...arg2)"></my-component>

以上代码中，foo是 <my-component> 组件内部定义的prop属性，baz 是父组件的一个data属性，event是子组件定义的一个事件，doThis是父组件的一个方法。

　　　　父组件把baz数据通过prop传递给子组件的foo；

　　　　子组件内部得到foo的值，就可以进行相应的操作；

　　　　当子组件内部发生了一些变化，希望父组件能知道时，就利用代码触发event-a事件，把一些数据发送出去；

　　　　父组件把这个事件处理器绑定为doThis方法，子组件发送的数据，就作为doThis方法的参数被传进来；

　　　　然后父组件就可以根据这些数据，进行相应的操作。

转载于:https://www.cnblogs.com/150536FBB/p/11290472.html

vue中父子组件通信的坑相关推荐

html中的父子通信代码,Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
Vue的父子组件通信(十种)
设计的面试题 Vue中父子组件通信有哪些方式? 概述通信方式无外乎就那几种: Prop 常用$emit 组件封装用的较多.sync 语法糖 (较少)$attrs和$listeners(组件封装用的较 ...
Vue 非父子组件通信方案
Vue 非父子组件通信方案概述在 Vue 中模块间的通信很普遍如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
Vue 非父子组件通信（ref）
Vue 非父子组件通信 (ref) 流程:1. 先在son子组件中定义一个数据和事件处理程序data( ) { return { flag: false }} , methods: { cry( ) ...
Vue中父子组件的六种通信方式
Vue中父子组件的通信方式一.Props + $emit Props:父传子父组件Parent.vue: <Child :message="message" @chang ...
vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...

vue中父子组件通信的坑

vue中父子组件通信的坑相关推荐

最新文章

热门文章