Vue父子元件間呼叫

2021-10-13 19:30:06 字數 747 閱讀 7650

父元件

在父元件中需要引入子元件,並通過 『 :+屬性名方式 』進行資料繫結

子元件

在子元件中使用prop屬性進行接收資料,定義props屬性就無需在data中定義

export default 

},methods:

},props: ['list']

}

子元件

定義乙個方法,this.datalist 就是要傳遞的資料

methods: 

}

父元件

在父元件中使用 @+子元件暴露的方法名呼叫

同時,在父元件中定義乙個方法接收資料,msg為子元件傳遞的資料datalist

methods: 

}

父元件

使用ref屬性呼叫子元件中的方法

父元件中的方法

getdatalist () ,
子元件

methods: 

}

vue 父子元件間互相獲取資料 呼叫方法

一 父元件獲取子元件的資料 呼叫子元件的方法 1 呼叫子元件的時候定義乙個ref childfile logo 2 在父元件裡面通過 this refs.childfile.屬性 this refs.childfile.方法二 子元件獲取父元件的資料 呼叫子元件的方法 this parent.資料 ...

Vue 父子元件間的通訊

前言在 vue 專案中父子元件的通訊是非常常見的,最近做專案的時候發現對這方面的知識還不怎麼熟練,在這邊做一下筆記,系統學習一下吧。父元件傳值給子元件,這個就比較常見了,直接用 props 就可以了。但是就算是 props 子元件那邊也有三種寫法,如下面 所示 父元件 子元件 1 簡單粗暴就給個名稱...

vue父子元件間傳值

confirm button primary click getbuttonclick el button div template export default data function 方法集 methods script add scoped attribute to limit css t...