Vue 元件部分

當使用dom元素作為模板（即為el指定某個元素）時，會受到html的一些限制：

1. vue只有在瀏覽器解析和標準化html後才能獲取模板內容。

2. 某些標籤元素限制了其所能包含的內容，比如

"from parent">component>
vue.component('component', }',
props: ['message']
})

可見，message屬性就像普通的屬性一樣被賦值，元件內部獲取該值從而更新檢視。

"text" v-model="parentattr">
:message-addd="parentattr">
component>
vue.component('component', }',
props: ['messageaddd']
})new vue(
})

每當父元件的屬性發生變化，子元件的檢視也會更新。

html特性不區分大小寫，當使用非字串模版時（如果使用字串模版，不用在意這些限制），prop的名字形式會從 camelcase 轉為 kebab-case（短橫線隔開）

這也是為什麼上面的例子中js中的messageadd，在html中卻是message-add的原因

如果我希望傳遞給子元件乙個number型別的數字，該怎麼傳遞呢？


some-prop="1">
comp>
:some-prop="1">
comp>

prop是單項繫結的，當父元件屬性變化時，傳給子元件；但反過來不會發生。prop屬性一般有兩種情況：

// 情況1， 初始值
props: ['initialcounter'],
data: function
() }
// 情況2， 計算屬性依賴
props: ['size'],
computed: 
}

在給元件的prop傳遞值時，往往需要一些驗證，以滿足邏輯需求。一般都是屬性名：屬性驗證的格式

// type可以是：string,number,boolean,function,object,array props:, // 數字，有預設值 propd: , // 陣列／物件的預設值應當由乙個工廠函式返回，依然是多個例項可能共享同乙個物件的問題 prope: }}, // 自定義驗證函式 propf:

}}

當 prop 驗證失敗了， vue 將拒絕在子元件上設定此值

之前提到，子元件是不被允許改變prop的值的，如果子元件要把資料傳遞回去，那就是自定義事件。

使用 $on(eventname) 監聽事件

使用 $emit(eventname) 觸發事件


}component-6>
component-6>
div>
div>
//js 部分
vue.component('component-6', }button>',
data: function () 
}, methods: 
}}) data: ,
methods: 
}})

除了自定義事件，如果想要繫結原生事件的話，那麼可以如下使用：

"dothething">my-component>

之前了解到：v-modle=v-bind:value+v-on:input

那麼，父元件如和監聽子元件的表單控制項的內容呢？想法肯定是利用子元件的事件將資料向上傳遞.

至於為什麼v-model可以放在此，看官網介紹

class="part">
class="title">子元件的表單控制項值傳遞到父元件p>
子元件的訊息：
}p>
v-model="message"
:parent-info="info">
component-7>
div>
div>
vue.component('component-7', 
},methods: 
},// 在子元件的input內容發生變化後，觸發input事件，從而觸發onput事件
// onput事件將子元件的input的值傳遞到父元件，父元件獲取到該值從而給message賦值
// message值發生變化，將其變動傳遞到子元件中，從而引發子元件中內容的變化
template: '\
\}p>\
:id="inputid"
v-on:input="onput">\
}p>\
div>\
'}) data: 
})

主要用於混合父元件的內容與子元件自己的模板，使用了元素作為原始內容的插槽。

關於slot，除非子元件模板包含至少乙個插口，否則父元件的內容將被丟棄。

當子元件模板只有乙個沒有屬性的 slot 時，父元件整個內容片段將插入到 slot 所在的 dom 位置，並替換掉 slot 標籤本身

最初在標籤中的任何內容都被視為備用內容，在子元件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

如果子元件有多個slot，那麼可以為每個slot指定name屬性作為標識，父元件通過宣告name屬性來指定內容所屬slot。另外，可以有乙個沒有name屬性的slot，作為父元件中沒有宣告name屬性的內容的去處。

Vue 元件部分

快取部分vue元件

Vue學習筆記指令和部分元件

vue元件引入另一vue元件

Vue 元件部分

快取部分vue元件

Vue學習筆記 指令和部分元件

vue元件引入另一vue元件

相關推薦

Vue學習筆記指令和部分元件