vue 基本指令 元件通訊的方式

2021-10-03 08:04:37 字數 941 閱讀 7159

逆戰班方長君老師

指令 directive

指令後面跟的都是表示式或者變數

內建指令 vue內部提供的直接使用

自定義指令 實現自定義某些功能的指令

條件渲染

都可以控制乙個元素的顯示或者隱藏

v-show 通過樣式 display:none

v-if 直接控制div元素有還是沒有 (v-else v-elseif)

事件繫結

使用vue中的事件

v-on:事件名(和原生js的事件名一致):事件的處理函式

@事件名:事件處理函式

事件的處理函式寫在例項的配置項 motheds

處理函式的預設引數是事件物件

如果需要傳遞其他引數 事件物件需要通過`$event 手動傳遞

屬性繫結

v-bind

元素的屬性都是跟的固定的值

屬性繫結可以實現 屬性的後方跟變數或者表示式

v-bind:要繫結的屬性名

:要繫結的屬性名

列表渲染

v-for 陣列 ** 數字 字串

雙向資料繫結 v-model

v-model 相當於 事件繫結v-on 和屬性 v-bind 集合體

將表單元素和data裡的資料進行繫結 任何一方發生改變另一方都會跟著變

元件通訊

在元件和例項中自己的資料只有自己可以控制

父子通訊 props

父元件控制子元件 父元件控制自己的資料變化,將變化後的資料通過props自定屬性傳子元件

子父通訊 $emit

子元件控制父元件的資料 父元件控制自己的資料變化,將控制函式通過emit自定義事件傳遞子元件 供子元件呼叫

兄弟通訊

a.狀態提公升

b.事件匯流排

c.全域性狀態管理

vue的元件通訊的方式

關於vue元件相互通訊的幾種方式如下 父元件通過props向下傳遞資料給子元件,子元件通過event給父元件傳送訊息,實際上就是子元件把自己的資料傳送給父元件。第一種方式處理父子元件之間的資料傳輸有乙個問題 如果父元件a下面有子元件b,元件b下面有元件c,這時如果元件a想傳遞資料給元件c怎麼辦呢?如...

vue元件間通訊方式

一 props emit 將要傳遞的引數繫結到元件上,子元件通過props接受引數 props 子元件通過事件傳遞給父元件 this emit functionname 值 只適用於父子 二 on emit 無差別轟炸,想隔幾層隔幾層傳 第一步新建js import vue from vue 使用 ...

vue之元件通訊方式 兄弟元件

今天回顧一下vue元件中兄弟元件如何實現通訊 在兄弟元件之間的通訊,可以採用關係鏈和ref鏈去使用,解決兄弟之間通訊問題。html布局 我是哥哥 打弟弟 我是弟弟 嗚嗚嗚嗚嗚嗚 js vue.component big brother vue.component littel brother new...