vue父组件主动获取子组件的数据和方法

父组件主动获取子组件的数据和方法：

1.调用子组件的时候定义一个ref

<v-header ref="header"></v-header>

2.在父组件里面通过

this.$refs.header.属性

this.$refs.header.方法

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">
    
        <v-header ref="header"></v-header>

        <hr>
         首页组件   

         <button @click="getChildData()">获取子组件的数据和方法</button>

    </div>

</template>
-------------------------------------------------------------------
  methods:{

            run(){

                alert('我是Home组件的run方法');
            },
            getChildData(){

                //父组件主动获取子组件的数据和方法：
                // alert(this.$refs.header.msg);//数据

                this.$refs.header.run();//方法
            }
        }

 

转载于:https://www.cnblogs.com/sulanlan/p/9932984.html