组件( Component)的概念:组件即自定义控件
组件的用途:组件能够封装可重用代码,扩展HTML标签功能组件的本质:自定义标签
组件的分类全局组件
作用域:不同作用域内均可使用局部组件
作用域:只在定义该组件的作用域内可以使用注意:
组件和vue实例类似,需要注册后才可以使用
组件名大写 浏览器会编译成小写 会找不到相应的组件 大写可以使用-加小写表示
可以在body标签中写template标签包裹 并且加上id
如果不用div标签包裹的话只会出现一个
示例:
<template id="childA">
<div>
<h1>我是child1</h1>
<h1>我是child1</h1>
<h1>我是child1</h1>
</div>
</template>
Vue.component('child1',{
template:'#childA'
})
## 一、组件即自定义控件
### 组件分类:
1. 全局组件:
Vue.component('child1',{
template:<h1>我是child1</h1>
})
2. 局部组件:
components:{
son:{
template:<h1>我是局部组件</h1>
}
}
子改父:
在子组件中定义一个方法:
使用$emit方法发送一个自定义事件,
在父组件中v-on这个自定义事件并在实例化对象的methods中添加这个方法
子组件代码如下:
components:{
child: {
template: '#child', //子组件使用props接收 props: ['cmsg'], methods: { change() { //使用Vue里面的emit('childchange') } } }