1. 程式人生 > >vue父元件主動獲取子元件的資料和方法

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();//方法 } }