vue中我们会遇到很多父子组件通信的需求,

下面简单列一下,父子组件通信的几种情况

1:父组件向子组件传值:使用prop向子组件传值;

2:子组件实时监听父组件传来的值的变化:使用watch去监听父组件传来的值;

3:父组件可以通过this.$refs.name.去访问子组件的值或方法;

4:子组件可以通过this.$parent.去访问父组件的值或方法;

总结了一下,感觉好像挺全面的,好像不缺啥了。。。。

但是仔细一想,父组件如何去监听子组件的值呢?如何根据子组件中的某个值的变化,父组件作出响应呢????

研究了一下,需要借用vueX!!!!超级大无敌的vueX

上个例子:

先看子组件

  1. <template>
  2. <div><el-button @click="dd()">自定义组件内的按钮</el-button>
  3. </div>
  4. </template>
  5.  
  6. <script>
  7. import { mapGetters,mapActions } from 'vuex';
  8. export default {
  9. watch:{
  10. text:{
  11. handler(newVal){
  12. this.$store.dispatch('user/setText',newVal);
  13. },
  14. immediate:true,
  15. }
  16. },
  17. data(){
  18. return {
  19. text:"自定义组件",
  20. }
  21. },
  22. props:['propObj'],//外部传值
  23. methods:{
  24. ...mapActions([
  25. 'setText'
  26. ]),
  27. dd(){
  28. if(this.propObj.name==2){
  29. this.propObj.name="哈哈";
  30. this.text="自定义组件";
  31. this.$emit('update:propObj', this.propObj)
  32. }else{
  33. this.propObj.name=2;
  34. this.text="????????????????";
  35. this.$emit('update:propObj', this.propObj)
  36. }
  37. }
  38. }
  39. }
  40. </script>

子组件中,点击按钮,会改变text的值,

我们用watch去监听,text值的变化,它如果变化了,就调用vueX中的actions方法,就是把vuex中的一个变量设置成text的值。

再来看看父组件中,只看computed即可:

  1. <script>
  2. import { mapGetters } from 'vuex';
  3. import Lala from '@/components/lala.vue';
  4.  
  5. export default {
  6. computed: {
  7. ...mapGetters(['childText'
  8. ])
  9. },
  10.  
  11. }
  12. </script>

父组件中,将vueX中的一个getter值作为计算属性,这不是就完美的监听了子组件值的变化了嘛!!!有了以上的几种方法,感觉可以在组件之间任意穿梭了

vue中父组件如何监听子组件值的变化的更多相关文章

  1. 怎样监听xhr.readyState值的变化

    可以使用 xhr.onreadystatechange 属性指向的函数去监听 xhr.readyState 值的变化. 示例如下: var xhr = new XMLHttpRequest(); xh ...

  2. React和Vue中,是如何监听变量变化的

    React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...

  3. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

  4. vue2.x 父组件监听子组件事件并传回信息

    利用vm.$emit 1.在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2.子组 ...

  5. vue中.sync修饰符,实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  6. vue watch 可以监听子组件props里面属性的改变

    子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');

  7. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  8. Vue中使用watch来监听数据变化

    写法一: methods:{ //监听isMD upProp(){ if(this.isMD){//如果isMD等于true 就把storeManagerName赋值给isStoreManagerNa ...

  9. 【Angular】父组件监听子组件事件(传参)

    Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event 举一个自己在写的项目

随机推荐

  1. mysql中的锁机制之概念篇

    锁的概念 ①.锁,在现实生活中是为我们想要隐藏于外界所使用的一种工具. ②.在计算机中,是协调多个进程或线程并发访问某一资源的一种机制. ③.在数据库当中,除了传统的计算资源(CPU.RAM.I/O等 ...

  2. 笔记 - C#从头开始构建编译器 - 3

    视频与PR:https://github.com/terrajobst/minsk/blob/master/docs/episode-03.md 作者是 Immo Landwerth(https:// ...

  3. .NetCore如何使用ImageSharp进行图片的生成

    ImageSharp是对NetCore平台扩展的一个图像处理方案,以往网上的案例多以生成文字及画出简单图形.验证码等方式进行探讨和实践. 今天我分享一下所在公司项目的实际应用案例,导出微信二维码图片, ...

  4. json其实就是一种数据格式

    1.json的两种书写: 2.字符串转换为json格式:

  5. JoinableQueue类与线程

    生产者消费者的问题及其解决办法 问题 在之前的生产者消费者模型中,生产者和消费者只有一个, 那么生产者往队列里put几次,消费者就get几次,但是存在一个问题, 生产者不一定只有一个,消费者也不一定只 ...

  6. vue去哪儿网项目环境配置

     一.首先安装node.js 根据自己的(windows或mac)系统进行安装node,在开发环境中一般安装LTS版本.安装成功后,在终端输入"node -v"和"npm ...

  7. python数据写入Excel表格

    from openpyxl import Workbook def main(): sheet_name = "表名1" row_count = 6 # 行数 info_resul ...

  8. 【Distributed】分布式配置中心

    一.概述 1.1 什么是分布式配置中心 常用分布式配置中心框架 二.Apollo阿波罗 2.1 Apollo特点 2.2 Apollo整体架构原理 2.3 Apollo Portol 环境搭建 Lin ...

  9. Computer Vision_33_SIFT:Evaluation of Interest Point Detectors——2000

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  10. 【前端】低版本IE浏览器访问网站一片空白

    最近在客户那里,发现一个奇葩的问题,系统上IE浏览器访问网站一片空白,显示无法访问. 但是相同的网站系统,在我们的电脑上又可以访问且IE浏览器版本相同,没法只有,装虚拟模拟客户环境复现一下了. 发现在 ...