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}
})