父組件向子組件傳值

簡短說來就是，父組件通過標簽動態(tài)綁定來傳遞數(shù)據(jù)，子組件通過props，以數(shù)組的形勢來接收。

首先寫一個子組件header.vue。

html部分：

image.png

如果要從父組件接收數(shù)據(jù)，那么就要使用props。這個logo是在父組件中定義的。

js部分：

image.png

父組件部分：在父組件中注冊子組件。 logo就是子組件中接收的名字。后面是要傳送的數(shù)據(jù)。

image.png

image.png

子組件向父組件傳值

子組件主要通過事件傳遞數(shù)據(jù)給父組件。

子組件部分：要將input輸入的用戶名傳到父組件中去。首先聲明一個了方法 setUser，用 change 事件來調用 setUser。在setUser方法中通過this.$eimt來遍歷 transferUser 事件，并返回 this.username。

其中 transferUser 是一個自定義的事件，功能類似于一個中轉，this.username 將通過這個事件傳遞給父組件

image.png

image.png

父組件部分

在父組件 App.vue 中，聲明了一個方法 getUser，里面的msg就是子組件傳送過來的username，用 transferUser 事件調用 getUser 方法，獲取到從子組件傳遞過來的參數(shù) username。

image.png

image.png

image.png