引用模块和动态组件
一、 组件component
1、 什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
组件是自定义元素（对象）
2.、定义组件的方式
方式1：先创建组件构造器，然后由组件构造器创建组件
方式2：直接创建组件
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义组件的两种方式</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <hello></hello> <my-world></my-world> </div> <script> /** * 方式1：先创建组件构造器，然后由组件构造器创建组件 */ //1.使用Vue.extend(template模板：组件内容)创建一个组件构造器 var MyComponent=Vue.extend({ template:'<h3>Hello World</h3>' }); //2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件 Vue.component('hello',MyComponent); /** * 方式2：直接创建组件(推荐) */ // Vue.component('world',{ Vue.component('my-world',{ template:'<h1>你好，世界</h1>' }); var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root el:'#itany', data:{ msg:'网博' } }); </script> </body> </html>
3、 组件的分类
1、 全局组件：可以在所有vue实例中使用，但是在全局组件中存储数据时，必须以函数形式，函数返回一个对象
2、局部组件：只能在当前vue实例中使用。存储数据时可以是个对象
3、示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的分类</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <my-hello></my-hello> <my-world></my-world> </div> <script> /** * 全局组件，可以在所有vue实例中使用 */ Vue.component('my-hello',{ template:'<h3>{{name}}</h3>', data:function(){ //在全局组件中存储数据时，必须以函数形式，函数返回一个对象 return { name:'alice' } } }); /** * 局部组件，只能在当前vue实例中使用 */ var vm=new Vue({ el:'#itany', data:{ name:'tom' }, components:{ //局部组件 'my-world':{ template:'<h3>{{age}}</h3>', data(){ return { age:25 } } } } }); </script> </body> </html>
4、 引用模板
1、将组件内容放到模板<template>中并引用，而且<template>中的元素有且只要一个根元素，根元素里面随便定义其他元素。
2、示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引用模板</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <my-hello></my-hello> <my-hello></my-hello>//创建my-hello组件实例 </div> <template id="wbs"> <!-- <template>必须有且只有一个根元素，模板标签，专门用来保存模板template中的数据，只要模板引入模板标签即可--> <div>//只有一个根元素，注意纯文本不是根元素 <h3>{{msg}}</h3> <ul> <li v-for="value in arr">{{value}}</li> </ul> </div> </template> <script> var vm=new Vue({ el:'#itany', components:{ 'my-hello':{ //定义my-hello组件 name:'wbs17022', //指定组件的名称，默认为标签名，可以不设置 template:'#wbs', data(){ return { msg:'欢迎来到南京网博', arr:['tom','jack','mike'] } } } } }); </script> </body> </html>
5、动态组件
1、格式： <component :is="">组件 #多个组件使用同一个挂载点，然后动态的在它们之间切换
2、优化方法：<keep-alive>组件
3、示例：将切换的数据保存在缓存中，避免重新渲染组件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态组件</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <button @click="flag='my-hello'">显示hello组件</button> <button @click="flag='my-world'">显示world组件</button> <div> <component :is="flag"></component> //组件之间来回切换，每一次切换都会重新渲染组件即将当前活动组件变为非活动组件然后从新生成一个获得组件，从随机数中可看出 </div> <div> <!-- 使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建 --> <keep-alive> <component :is="flag"></component> </keep-alive> </div> </div> <script> var vm=new Vue({ el:'#itany', data:{ flag:'my-hello' }, components:{ 'my-hello':{ template:'<h3>我是hello组件：{{x}}</h3>', data(){ return { x:Math.random()//产生随机数 } } }, 'my-world':{ template:'<h3>我是world组件：{{y}}</h3>', data(){ return { y:Math.random() } } } } }); </script> </body> </html>
