VUE元件通訊

一、父元件傳值給子元件：

通過props屬性接收資料：

props選項可以使用乙個陣列接收變數，也可以使用物件，當需要對props進行型別等驗證時，就需要物件寫法了。

驗證支援的資料型別：

string, number, boolean, array, object, date, function, symbol

使用方式：

vue.component('my-component', ,
//帶預設值的數字
propd： ,
//帶預設值的物件
prope： }},
//自定義驗證函式
propf: }}
})

補：駝峰標識：即：在vue中，v-bind繫結的屬性名不支援駝峰，例如在props裡面定義乙個cinfo物件，使用駝峰命名，在繫結該物件時就不能使用v-bind: cinfo = "info",它會找不到props裡面的cinfo物件，需要進行轉換才行，即寫成v-bind: c-info="info"

二、子元件向父元件傳遞資料

在元件使用this.$emit('事件名',值)，傳送乙個事件，然後在父元件呼叫子元件的地方繫結該事件名，引數就是傳來的值。

子元件將value值傳給父元件

watch:

}

//
父元件接收(這裡使用了vue自定義標籤component，通過is屬性動態載入元件)
v-for="(item, index) in testitems":key="index":is="item.type":item="item"@getvalue="fgetvalue">
----------------------------------------
//js方法
methods: 
}

注意：上述例子傳的是單個值，在寫父元件的@getvalue="fgetvalue"時，fgetvalue是省略了括號的，這裡會自動接收這個子元件傳來的值並傳給函式作為引數（傳來的有幾個值，在methods裡的fgetvalue()括號裡寫幾個引數就行）。也可以寫@getvalue="fgetvalue($event)"，但是當子元件傳來多個引數時，使用$event只會接收傳來的第乙個引數。要想接收多個子元件傳來的值可以使用@getvalue="fgetvalue(arguments)"，接收到的值會放到乙個陣列裡：

或者直接寫多個引數接收。

還有一種情況，既要接收子元件傳來的值，又要傳父元件自定義的引數：

子元件傳來的只有乙個值時：

this.$emit('getvalue', this.value1) //
子元件傳值

父元件接收：

@getvalue="fgetvalue($event,patentparam)"  //
parentparam父元件自定義引數

子元件傳來的有多個值時：

this.$emit('getvalue', this.value1, this.value2, this.value3) //

子元件傳值

父元件接收：

@getvalue="fgetvalue(arguments,patentparam)"  //
parentparam父元件自定義引數

三、父元件訪問子元件方式1、使用$children

使用this.$children獲取的是乙個子元件列表，可以通過索引獲取某個特定子元件，使用較少，不方便改動。

2、使用$refs

在子元件標籤上，使用ref屬性繫結子元件名稱，在父元件裡使用this.$refs可獲取所有子元件物件，再通過.名稱即可獲取某個特定子元件

四、子元件訪問父元件

使用this.$parent,不過一般不建議使用。

因為使用它之後會增加耦合度，使子元件的復用性變低。

使用this.$root訪問根元件，也很少使用。

VUE元件通訊

Vue 元件通訊

vue元件通訊

Vue元件通訊

VUE元件通訊

Vue 元件通訊

vue元件通訊

Vue元件通訊

相關推薦