VUE子元件向父元件的資料傳遞

2021-08-28 09:32:33 字數 1837 閱讀 7177

我們知道,父元件使用 prop 傳遞資料給子元件。但子元件怎麼跟父元件通訊呢?這個時候 vue 的自定義事件系統就派得上用場了。

使用 繫結自定義事件v-on

每個 vue 例項都實現了事件介面,即:

使用 $on(eventname) 監聽事件

使用 $emit(eventname) 觸發事件

vue 的事件系統與瀏覽器的 eventtarget api 有所不同。儘管它們的執行起來類似,但是 $on 和 $emit 並不是addeventlistener 和 dispatchevent 的別名。

另外,父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。

不能用 $on 偵聽子元件釋放的事件,而必須在模板裡直接用 v-on 繫結,參見下面的例子。

//定義子元件

var child = }`,

data()

},methods:

}}

//根元件

var vm = new vue(,

components: ,

methods:

}})//html

使用插槽分發內容

注意兩點:

元件不知道它會收到什麼內容。這是由使用 的父元件決定的。

元件很可能有它自己的模板。

為了讓元件可以組合,我們需要一種方式來混合父元件的內容與子元件自己的模板。這個過程被稱為內容分發 (即 angular 使用者熟知的「transclusion」)。vue.js 實現了乙個內容分發 api,參照了當前 web components 規範草案,使用特殊的 元素作為原始內容的插槽。

//slot插槽使其可以在html中傳入資料,也可以在其中傳入預設內容

var child = 

var vm = new vue(

})html

hello

有名slot

//slot插槽使其可以在html中傳入資料,也可以在其中傳入預設內容

var child =

var vm = new vue(

})html

頭部內容

22222

底部內容

非父子元件

有時候,非父子關係的兩個元件之間也需要通訊。在簡單的場景下,可以使用乙個空的 vue 例項作為事件匯流排:

var bus = new vue()

template: '新增

', methods: }}

template: '}

', data()

},created() )}}

var vm = new vue (

})模態框例項

登入註冊

登入

靜態路由

不需要複雜的路由

首先需要

npm i -s vue-router 安裝router庫

var newscomponent =

var shopcomponent =

var notfoundcomponent =

var routes = [,,

,]

var router = new vuerouter()

// router

// })

router

})

動態路由

var goods = )}},

data()

}

vue子元件向父元件傳遞資料

vue專案中經常使用到元件之間的數值傳遞,實現的方法很多,但是原理基本上大同小異。子元件向父元件出傳遞資料,使用自定義事件的方式。父元件向子元件傳遞資料,使用props屬性的方式。推薦文章 vue筆記 父元件向子元件傳遞資料 我們可以從子元件中想父元件中傳遞多個資料,在子元件中要做的工作只是,使用t...

父元件向子元件傳遞資料 14 父元件向子元件通訊

1.不使用 v bind 傳遞資料 2.使用 v bind 傳遞資料 3.以上兩者的區別。先把重要的知識點寫在前面 簡單來說,父元件向子元件傳遞資料可以分為以下幾個步驟 在父元件繫結資料 在子元件使用 props 接收資料 在子元件使用資料。data components 渲染 2.在子元件上繫結 ...

vue父元件向子元件傳遞資料prop

今天學習vue學到使用prop父向子傳遞資料,學了半天也沒懂什麼意思,沒學懂 記住不 true 查了下別人的學習經驗發現基本上都是拷貝vue官網的介紹,哎,不要臉的真多,能咋辦 繼續研究唄 他說是父元件向子元件傳遞繫結的資料 子元件接收父元件資料,那就逆向推理一下 text align center...