Vue组件

组件( 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>`
                }
            }
复制代码

全局组件放在哪里都可以使用 局部组件只能放在挂载的实例化对象使用

组件的父传子:

在父组件中定义一个v-bind的值 绑定在data的数据

子组件在在template下面添加一个props数组的形式添加父组件绑定的值的名字

如下图：

子改父：

在子组件中定义一个方法：

使用$emit方法发送一个自定义事件，

在父组件中v-on这个自定义事件并在实例化对象的methods中添加这个方法

子组件代码如下：

components:{
        child: {
                    template: '#child',
                    //子组件使用props接收
                    props: ['cmsg'],
                    methods: {
                        change() {
                            //使用Vue里面的$emit方法发送一个自定义事件
                            this.$emit('childchange')
                        }
                    }
        }
   ```