本文实例讲述了vue组件定义，全局、局部组件，配合模板及动态组件功能。分享给大家供大家参考，具体如下：
一、定义一个组件
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:' h3 我是标题3 /h3 '
ponent('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
components:{ //局部组件
aaa:Aaa
1. 全局组件
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title Document /title
script src="vue/2.4.4/vue.min.js" /script
style
/style
/head
body
div id="box"
aaa /aaa
/div
script
var Aaa=Vue.extend({
template:' h3 我是标题3 /h3 '
ponent('aaa',Aaa);
var vm=new Vue({
el:'#box',
data:{
bSign:true
/script
/body
/html
title Document /title script src="vue/2.4.4/vue.min.js" /script style /style /head body div id="box" my-aaa /my-aaa /div script //另外一种写法，全局 ponent('my-aaa',{ template:' strong 好 /strong ' var vm=new Vue({ el:'#box' /script /body /html
组件里面放数据：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title Document /title
script src="vue/2.4.4/vue.min.js" /script
/head
body
div id="box"
aaa /aaa
/div
script
var Aaa=Vue.extend({
//组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
data(){
return {
msg:'我是标题^^'
methods:{
change(){
this.msg='changed'
template:' h3 @click="change" {{msg}} /h3 '
ponent('aaa',Aaa);//放在这里是全局
var vm=new Vue({
el:'#box',
data:{
bSign:true
/script
/body
/html
2. 局部组件
放到某个组件内部
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title Document /title
script src="vue/2.4.4/vue.min.js" /script
style
/style
/head
body
div id="box"
aaa /aaa
br/
br/
my-aaa /my-aaa
/div
script
var Aaa=Vue.extend({
template:' h3 {{msg}} /h3 ',
data(){
return {
msg:'ddddd'
var vm=new Vue({
el:'#box',
data:{
bSign:true
components:{ //局部组件
aaa:Aaa,
'my-aaa':Aaa//这里的my-aaa需要用引号
/script
/body
/html
另外一种写法，局部
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title Document /title
script src="vue/2.4.4/vue.min.js" /script
style
/style
/head
body
div id="box"
my-aaa /my-aaa
/div
script
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
methods:{
change(){
this.msg='changed';
template:' h2 @click="change" 标题2- {{msg}} /h2 '
/script
/body
/html
二、配合模板
配合模板:
1. template:' h2 @click="change" 标题2- {{msg}} /h2 '
2. 单独放到某个地方
a).
script type="x-template" id="aaa"
h2 @click="change" 标题2- {{msg}} /h2
/script
b).
template id="aaa"
h1 标题1 /h1
li v-for="val in arr"
{{val}}
/li
/ul
/template
方法一：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title Document /title
script src="vue/2.4.4/vue.min.js" /script
style
/style
/head
body
div id="box"
my-aaa /my-aaa
/div
script type="x-template" id="aaa"
h2 @click="change" 标题2- {{msg}} /h2
li 1111 /li
li 222 /li
li 3333 /li
li 1111 /li
/ul
/script
script
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
methods:{
change(){
this.msg='changed';
template:'#aaa'
/script
/body
/html
方法二：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title Document /title
script src="vue/2.4.4/vue.min.js" /script
style
/style
/head
body
div id="box"
my-aaa /my-aaa
/div
template id="aaa"
h1 @click="change" {{msg}} /h1
li v-for="val in arr"
{{val}}
/li
/ul
/template
script
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
methods:{
change(){
this.msg='changed title';
template:'#aaa'
/script
/body
/html
三、动态组件
动态组件:
component :is="组件名称" /component
title Document /title script src="vue/2.4.4/vue.min.js" /script style /style /head body div id="box" input type="button" @click="a='aaa'" value="aaa组件" input type="button" @click="a='bbb'" value="bbb组件" component :is="a" /component !-- component :is="组件名称" /component -- /div script var vm=new Vue({ el:'#box', data:{ a:'aaa' components:{ 'aaa':{ template:' h2 我是aaa组件 /h2 ' 'bbb':{ template:' h2 我是bbb组件 /h2 ' /script /body /html
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。