Vue 組件的 API 來自三部分 - props, events 和 slots :
Props 允許外部環境傳遞數據給組件
Events 允許從外部環境在組件內觸發副作用
Slots 允許外部環境將額外的內容組合在組件中。
注冊
之前說過,我們可以通過以下方式創建一個 Vue ;
實例:
new Vue({
el: '#some-element',
// 選項
})
要注冊一個全局組件,你可以使用 Vue.component(tagName, options)
例如:
Vue.component('my-component', {
// 選項
})
父組件向子組件傳遞【props】
【1】這種方法用于傳遞字符串,且值是寫在父組件自定義元素上的。
【2】下面示例中的寫法,不能傳遞父組件data屬性中的值
【3】會覆蓋模板的data屬性中,同名的值。
<div id="app">
<tm1 v-bind:m="title"></tm1>
<tm2></tm2>
</div>
<template id="top">
<div>
111{{m}}
</div>
</template>
<template id="top1">
<div>
222
</div>
</template>
js代碼
var tm1={
template:“#top”,
props:【‘m’】
};
var tm2={
template:"#top1”,
};
new Vue({
el:"#app",
data:function(){
return{
title:"我是父親"
}
},
components:{tm1,tm2}
})