父子元件間的資料方法的傳遞

在對vue了解不深的情況下去看github的專案資源的時候總是很吃力，乙個頁面通常都去幾個檔案調取資料和方法。調取資料和方法的**也是看的很吃力。今天去修煉了一下vue框架中父子元件的關係。

首先是父元件主動給子元件傳值和方法

分兩步

1.父元件呼叫子元件的時候呼叫動態屬性

2.在子元件裡面通過props接收

**如下：

:title=
"title" 
:msg=
"msg
" :run=
"run" 
"this"
>

importhomefrom'./components/home.vue'

components:,

在子元件中使用和data同級的props來接收父元件傳來的資料和引數（注意方法也要用引號包起來）

props:['title'
,'msg'
,'run'],


這是乙個子元件----}----}
@click=
"run(123)"
>
執行方法

子元件使用的時候直接引用就可以。

對於整個例項傳過來的情況這需要用this去接收

this.run();
alert(this.title)

上面講的是被動獲取下面是主動獲取的方法

分成父元件獲取子元件，和子元件獲取父元件兩種

在父元件中引入使用子元件

在父元件中定義子元件的時候在子元件的標籤上加上ref如

然後再父元件裡面就可以通過this.$refs.home.屬性或方法進行呼叫

在父元件中引入使用子元件

是在子元件中通過this.parents.資料或方法進行呼叫

1.父元件傳遞資料給子元件父元件資料如何傳遞給子元件呢？可以通過props屬性來實現父元件這裡必須要用代替駝峰 data 子元件通過props來接收資料方式1 props childmsg 方式2 props 方式3 props 這樣呢，就實現了父元件向子元件傳遞資料.2.子元件與父元件通...

vue當中有個單向資料流的概念，也就是父元件可以向子元件傳遞修改引數通過屬性的方式傳但子元件不可以反過來修改父元件傳遞過來的引數！因為怕子元件改了父元件引用型別的資料，可能會影響到其他元件那怎樣解決這個問題？可以複製給子元件自己的變數，然後子元件修改自己的變數啊！這是父元件向子元件傳遞資料...

在 vue 中，父子元件之間的關係可以概述為 props 向下，events 向上父元件通過 props 向下傳遞資料給子元件，子元件通過 events 傳送訊息給父元件。demo的目錄結構如下 demo顯示效果如下一父元件向子元件傳遞資料父元件通過props向子元件傳遞資料父元件的如下...