vue定义组件

vue定义组件

vue中定义组件有两种：全局组件和局部组件。

全局组件可以在页面的任何位置使用，局部组件只能在定义的el的范围内使用，在el的范围外使用会不显示 。

定义全局组件的方法：
Vue.component("component-name",{
       template:'<h1>{{message}}</h1>',
       data:function(){
               return {message:'hello'}
        }
})


定义局部组件的方法：
new Vue({
        el:'#box',
        data:{        
            message:'hello',
        },
        components:{
                component-name:{
                     template:'<h1>{{message}}</h1>',    
                     data:function(){
                            return {message:'hello'}
                      }
                }
        }    
 })

模板组件的创建：
通过将组件的html用<template></template>包裹起来来创建一个组件模板，示例如下:
在html中创建：
<template id="app">
    <h1>hello</h1>
</template>
使用方法：将template的id传递给组件tenplate就可以了，如下：
  Vue.component("component-name",{
       template:'#app',
})