zoukankan      html  css  js  c++  java
  • vue组件通信之父组件主动获取子组件数据和方法

    ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法。

    比如,我定义了一个home组件,一个head组件,home组件中引用head组件。

    此时,home组件是head组件的父级,我想在home(父组件)组件中,获取head(子组件)组件中定义的数据和方法

    <v-head ref="header"></v-head>   // v-head 为 head 组件在 home 组件中注册的标签名,ref='header' 相当于获取到当前组件

    <button @click='getHeadData()'>父组件主动获取子组件定义的数据和方法</button>
    getHeaderData() {                  // home 组件 methods 下定义的方法
       this.$refs.header.on_alert();   // on_alert() 是 head 组件中定义的一个方法
    }

    这样,就可以在父组件中,主动获取到子组件中的数据和方法。

    当然,子组件也可以主动获取父组件的数据和方法。

    this.$parent.run()  // run 为 home 组件中定义的方法,在 head 组件中可以直接调用
  • 相关阅读:
    youtube-VisualSfM and MeshLab workflow video-meshlab part integration
    testing_lab1
    homework2-st
    homework1-spm
    homework1-st
    just one last blog
    week 10
    week 9
    week 8
    课后题7
  • 原文地址:https://www.cnblogs.com/Sky-Ice/p/9289123.html
Copyright © 2011-2022 走看看