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',})