zoukankan      html  css  js  c++  java
  • Vue(二十六)父子组件通信

    今天写了一个分页公共组件,就出现了父子组件通信的问题,今天来总结下我遇到的父子组件通信问题

    一、子组件调取父组件的数据或方法

    (1)props

      想要把父组件的值,传到子组件中,使用props

      比如你在父组件中定义的一个data,你想在子组件中使用

      父组件:

      

      子组件:

      

      这样子组件中的这几个值,都是由父组件传递过来的

    (2)$parent

      我一般使用this.$parent来获取父组件的data和method,但是今天却出现了一个问题

      因为我是写的公共组件,在多个页面中使用,发现有些页面可以,而有些页面不写。原来$parent有层级关系

      父组件:

      

      子组件:

      

      但是项目结构一深,this.$parent.handleSizeChange(val)和this.$parent.handleCurrentChange(val)报错,未定义

      试过才知道,需要this.$parent.$parent.$parent.XXX() 

      

      官网也不推荐使用这个方法,果断放弃这个方法

    (2)$emit

      最后我子组件调用父组件的方法用的是$emit

      父组件:

      

      

      子组件:

      

    二、父组件调取子组件的数据或方法

    子组件在父组件中

    <childCom ref="childCom"></childCom>

    父组件调用子组件属性和方法

    this.$refs.childCom.XXX  //xxx为属性或者方法
  • 相关阅读:
    NET 2.0(C#)调用ffmpeg处理视频的方法(转载)
    ffmpeg编解码详细过程(转载)
    使用FFMPEG SDK解码流数据
    FFMPEG解码流程
    web worker,SSE,WebSocket,AJAX 与后端交互的方式
    jQuery基础篇
    Git的基本命令介绍
    项目配置中 提示access denied的问题 解决方案
    http网络协议 学习摘要
    OSI七层模型 学习摘要
  • 原文地址:https://www.cnblogs.com/yulingjia/p/9707099.html
Copyright © 2011-2022 走看看