vue 中元件與元件之間通訊的方式

2022-09-11 14:03:32 字數 650 閱讀 1700

1. vue 中元件與元件之間通訊的方式?

父 -> 子 prop

子 -> 父 子通過 $emit 觸發乙個自定義事件 。 父在呼叫這個子元件的時候,監聽這個自定義事件即可

下面這兩種能實現,但是很繁瑣。我們有更好的方式叫做**事件處理器或者vuex

兄 -> 弟 要通過父親來操作

表兄 -> 表弟 要通過爺爺

1. $root 能夠獲取到根元件的例項物件

2. $parent 獲取父元件的例項物件

3. $children 獲取子元件們的例項物件集合

4. $refs 獲取具體某個子元件的例項或者具體某個html元素的真實dom。(這個東西在獲取具體某個html元素的時候常用。。。)

4.1 首先需要標記。你想要獲取的元件或者html元素,在他們身上定義乙個 ref="***"

4.2 然後 this.$refs.***

如果 ref 標記的是普通html元素,那麼到通過 $refs.*** 得到的將是 這個 html元素的dom物件

如果 ref 標記的是乙個子元件。那麼 通過 $refs.*** 得到的將是這個 子元件的 例項物件

//**視例

vue元件,父元件與子元件之間通訊

vue元件,元件是乙個可復用的功能模組,即將具有相同功能的模組抽取成乙個元件,在需要的地方引用即可,這體現了 封裝的思想,下面看一下元件是如何實現 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked...

Vue中父元件與子元件之間的通訊

prop 父元件向子元件傳遞資料,單向繫結 refs 父元件呼叫子元件裡的屬性和方法 emit 子元件向父元件傳遞訊息 新建專案 vue create demo cd demo npm run servecomponents child.vue 子元件h2 template 父元件h2 child ...

Vue中元件之間的通訊

元件 全域性自定義元件 在任何乙個例項中都可以使用 區域性自定義元件 只能在當前的例項中使用 1.乙個元件裡面只能對應乙個根標籤 2.元件裡面的內容寫成返回值的形式 元件的使用,就相當於自定義的標籤,元件的名稱就可以當成乙個自定義的標籤 全域性的元件 vue.component test compo...