vue组件定义，全局、局部组件，配合模板及动态组件功能示例

本文实例讲述了vue组件定义，全局、局部组件，配合模板及动态组件功能。分享给大家供大家参考，具体如下：

目前成都创新互联已为近1000家的企业提供了网站建设、域名、虚拟主机、网站托管维护、企业网站设计、大厂网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、定义一个组件

定义一个组件:

1. 全局组件

var Aaa=Vue.extend({
 template:'
我是标题3
'
});
Vue.component('aaa',Aaa);

*组件里面放数据:

data必须是函数的形式，函数必须返回一个对象(json)

2. 局部组件

放到某个组件内部

var vm=new Vue({
 el:'#box',
 data:{
  bSign:true
 },
 components:{ //局部组件
  aaa:Aaa
 }
});

1. 全局组件

组件里面放数据：

2. 局部组件

放到某个组件内部

另外一种写法，局部

二、配合模板

配合模板:

1. template:'

标题2->{{msg}}

2. 单独放到某个地方

a).

b).

方法一：

方法二：

三、动态组件

动态组件:

运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。