组件

120 阅读1分钟

组件( 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方法发送一个自定义事件        this.emit方法发送一个自定义事件                 this.emit('childchange')                         }                     } }