vue.js最重要的角色---组件

为什么要用组件：提高代码的复用性。

1. 全局注册

• 优点：都可以用
• 缺点：容错率较低
• 总结：所以用的少

模板

Vue.component('tag',{
template:'<div>  </div>'
})
<div id="app">
<my-component></my-component>
//因为下面组件中定义了，所以可以直接用。
</div>

<script>
Vue.component('my-component',{
template:'<div>我是一个组件</div>'
})
</script>

因为

标签中只能有tr，td，tbody，所以，不能直接写进去，会被排斥出来，正确写法为：

<table>
<tbody is= "my-component">
</tbody>
</table>

2. 局部注册

<div id="app">
<my-component></my-component>
//因为下面组件中定义了，所以可以直接用。
</div>
<div id="bpp">
<my-component></my-component>
//因为下面组件中定义了，所以可以直接用。
</div>
<script>
Vue.component('my-component',{
template:'<div>我是一个组件</div>'
})
var app = new Vue({
el:'#app',
components:{
'my-components':{
template:'<div>我是app局部注册一个组件</div>'
}},
})
var bpp = new Vue({
el:'#bpp',
})
</script>

3. 组件使用的技巧 推荐小写加下划线：my-component; template中的内容必须被一个DOM元素包裹，也可以嵌套 template:'

   我是一个组件
   ' js.jirengu.com/rukabececi/…

4. 组件的通信，父组件给子组件用