vue學習

1.$emit('data');//自定義一個data事件。$emit()觸發事件，$on()監聽事件，另外，父組件能夠在使用子組件的地方直接用v-on綁定，不能用$on傾聽子組件拋出的事件，而必須在模板裏直接用v-on綁定。

2.data必須是一個函數。

Prop

使用 Prop 傳遞數據

組件實例的做用域是孤立的。這意味着不能 (也不該該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，咱們須要經過子組件的 props 選項。

子組件要顯式地用 props 選項聲明它期待得到的數據：

Vue.component( 'child', { // 聲明 props props: [ 'message'], // 就像 data 同樣，prop 能夠用在模板內 // 一樣也能夠在 vm 實例中像「this.message」這樣使用 template: '<span>{{ message }}</span>' })

而後咱們能夠這樣向它傳入一個普通字符串：

<child message="hello!"></child>

結果：hello

3.組件在註冊以後，即可以在父實例的模塊中以自定義元素 <my-component></my-component> 的形式使用。要確保在初始化根實例以前註冊了組件：就是new Vue 要在Vue.component以後建立。

<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>

錯誤：顯示Make sure to declare reactive data properties in the data option.，，，須要在實例中的data 中初始化一個parentMsg.

SLOT：：

 

 

Vue組件中slot的用法

 

2017-01-10 23:20 2231人閱讀 評論(0) 收藏 舉報

 

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。

 

Vue組件中slot的用法

主要是讓組件的可擴展性更強。

1. 使用匿名slot 

2. 給slot加個名字

若是不在有slot的組件里加入任何標籤，slot什麼都不會顯示的。