全局组件
<body> <div id="app" > <zhujian_all></zhujian_all> </div> </body> <script type="text/javascript"> // 全局自定义组件 Vue.component( 'zhujian_all', { template:'<div>全局组件 <zhujian_a></zhujian_a> </div>', } new Vue({ el:'#app', }) </script>
局部组件
<body> <div id="app" > <zhujian_all></zhujian_all> </div> </body> <script type="text/javascript"> // 局部组件定义 var zhujian_a={ template:'<div>局部组件</div>' } // 全局自定义组件 Vue.component( 'zhujian_all', { template:'<div>全局组件 <zhujian_a></zhujian_a> </div>', //注册局部组件 components:{ zhujian_a } } ) new Vue({ el:'#app', }) </script>
组件中的数据绑定
<script type="text/javascript"> // 局部组件定义 var zhujian_a={ template:'<div>局部组件</div>'
//局部组件中的数据绑定要在这里定义
} // 全局自定义组件 Vue.component( 'zhujian_all', { //代码模板 template:'<div>全局组件 <zhujian_a></zhujian_a> {{name}}</div>', //注册局部组件 components:{ zhujian_a }, //组件定义绑定数据 data:function(){ return {name:'绑定的数据'} } } ) new Vue({ el:'#app', }) </script>