vue元件基礎之父子傳值

2022-06-19 00:00:12 字數 1129 閱讀 3565

可以看出資料從後端獲取過來,最外層的父元件接收資料,子元件不能直接獲取,必須由父元件傳遞,此時使用props,並且父元件的值更新後,子元件的值也會隨之更新,但是反過來通過修改子元件props來影響父元件是不行的。但是子元件可以通過$emit觸發父元件的自定義事件來進行傳值。

一、props

1、獲取資料

現在假設已經從後台獲取到了資料,父元件中已經有資料。

2、繫結自定義屬性

在父元件中使用子元件(vcontent),給子元件繫結自定義屬性。

3、在子元件中驗證資料型別

向將要傳遞的子元件中驗證傳遞的資料型別,資料型別有和多種,根據自己寫的資料型別填寫:

4、渲染資料

此時可以在子元件中使用傳遞過來的資料了

二、自定義事件

用於子元件向父元件傳值,假設現在vcontent元件中通過頁面新增了一條資料,此時就需要

1、父元件自定義事件

2、觸發自定義事件

事件繫結到vcontent元件上,那麼在對應的元件中來進行觸發,使用this.$emit方法進行觸發

總結:詳情參考:

父子組建傳值 詳解Vue之父子元件傳值

一 簡要介紹 父子元件之間的傳值主要有三種 傳遞數值 傳遞方法 傳遞物件,主要是靠子元件的 props 屬性來接收傳值,下面分別介紹 一 傳遞數值 1.子元件 header.vue export default data return methods 接收父類的傳值 props msg 可以看到,在...

Vue之父子元件值傳遞

這裡用乙個 例項來解釋一下 子元件向父元件傳值 learn vuetitle src vue.js script window.onload function methods components methods template components methods template conten...

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...