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

2019-11-19 11:58:42

字体：大中小

来源：转载

供稿：网友

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

一、定义一个组件

定义一个组件:

1. 全局组件

var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>'});Vue.component('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="https://cdn.bootcss.com/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>'  });  Vue.component('aaa',Aaa);  var vm=new Vue({   el:'#box',   data:{    bSign:true   }  }); </script></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <style> </style></head><body> <div id="box">  <my-aaa></my-aaa> </div> <script>　　　　//另外一种写法，全局  Vue.component('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="https://cdn.bootcss.com/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>'  });  Vue.component('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="https://cdn.bootcss.com/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="https://cdn.bootcss.com/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> <ul>  <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="https://cdn.bootcss.com/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>  <ul>   <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="https://cdn.bootcss.com/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>  <ul>   <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>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/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>

运行效果：