Vue组件注册

最新推荐文章于 2024-04-09 11:17:01 发布

泡老师大迷弟

最新推荐文章于 2024-04-09 11:17:01 发布

阅读量1.1k

点赞数

分类专栏： Vue学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/PengK_aha/article/details/128114472

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.全局组件注册语法

2.1 全局组件注册语法
   参数1：组件名称；
   参数2：组件对象（data（组件内部需要的数据），template（模板内容））
   Vue.component('button-counter', {
       data: function(){
           return {
               count: 0
           }
       },
       template: '<button @click="handle">点击了{{count}}次</button>',
       methods: {
           handle: function(){
               this.count +=2;
           }
       }
   });

2.组件使用 , 可重复使用

<div id="app">
       <button-counter></button-counter>
   </div>

   <div id="app">
       <button-counter></button-counter>
       <button-counter></button-counter>
       <button-counter></button-counter>
   </div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	组件注册
	2.1 全局组件注册语法
	参数1：组件名称；  
	参数2：组件对象（data（组件内部需要的数据），template（模板内容））
	Vue.component('button-counter', {
		data: function(){
			return {
				count: 0
			}
		},
		template: '<button @click="handle">点击了{{count}}次</button>',
		methods: {
			handle: function(){
				this.count +=2;
			}
		}
	});
	
	组件使用 , 可重复使用
	<div id="app">
		<button-counter></button-counter>
	</div>
	
	<div id="app">
		<button-counter></button-counter>
		<button-counter></button-counter>
		<button-counter></button-counter>
	</div>

	 */
	Vue.component('button-counter', {
		data: function(){
			return {
				count: 0
			}
		},
		template: '<button @click="handle">点击了{{count}}次</button>',
		methods: {
			handle: function(){
				this.count +=2;
			}
		}
	});
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

3.组件注册注意事项

       1. data必须是一个函数
       2. 组件模板内容必须是单个根元素
       3. 组件模板内容可以是模板字符串（使用反引号）
           模板字符串需要浏览器提供支持（ES6语法）
           template:

                 `<div>
                   <button @click="handle">点击了{{count}}次</button>
                   <button>测试</button>
               </div>`

        4.组件的命名方式
           短横线方式
           Vue.component('button-counter', {})
           驼峰方式
           如果使用驼峰式命名组件，那么在使用组件的时候，
           只能在字符串模板中用驼峰的方式使用组件，但是
           在普通的标签模板中，必须使用短横线的方式使用
           Vue.component('helloWorld', {})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	2.3 组件注册注意实现
		1. data必须是一个函数
		2. 组件模板内容必须是单个根元素
		3. 组件模板内容可以是模板字符串
			模板字符串需要浏览器提供支持（ES6语法）
			template: `
				<div>
					<button @click="handle">点击了{{count}}次</button>
					<button>测试</button>
				</div>
			`	
	 */
	Vue.component('button-counter', {
		data: function(){
			return {
				count: 0
			}
		},
		template: `
			<div>
				<button @click="handle">点击了{{count}}次</button>
				<button>测试</button>
			</div>
		`,
		methods: {
			handle: function(){
				this.count +=2;
			}
		}
	});
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
			<hello-world></hello-world>
			
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	2.3 组件注册注意事项
		1. data必须是一个函数
		2. 组件模板内容必须是单个根元素
		3. 组件模板内容可以是模板字符串
			模板字符串需要浏览器提供支持（ES6语法）
			template: 
				`<div>
					<button @click="handle">点击了{{count}}次</button>
					<button>测试</button>
				</div>`
		4.组件的命名方式
			短横线方式
			Vue.component('button-counter', {})
			驼峰方式
			如果使用驼峰式命名组件，那么在使用组件的时候，
			只能在字符串模板中用驼峰的方式使用组件，但是
			在普通的标签模板中，必须使用短横线的方式使用
			Vue.component('helloWorld', {})	
			
	 */
	Vue.component('helloWorld', {
		data: function(){
			return {
				msg: 'helloWord'
			}
		},
		template: '<div>{{msg}}</div>'
		
	})
	
	Vue.component('button-counter', {
		data: function(){
			return {
				count: 0
			}
		},
		template: `
			<div>
				<button @click="handle">点击了{{count}}次</button>
				<button>测试</button>
				<helloWorld></helloWorld>
			</div>
		`,
		methods: {
			handle: function(){
				this.count +=2;
			}
		}
	});
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

4. 注册局部组件

局部组件只能在注册他的父组件中使用
       1.定义一个组件对象
       var HelloJack = {
           data: function(){
               return {
                   msg: '窗外的麻雀'
               }
           },
           template: '<div>{{msg}}</div>'
       };
       2.在Vue对象中注册
       var vm = new Vue({
           el:'#app',
           components: {
               'hello-jack': HelloJack,
               'hello-marry': HelloMarry,
               'hello-tom': HelloTom
           }
       });

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<hello-jack></hello-jack>
			<hello-marry></hello-marry>
			<hello-tom></hello-tom>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
		局部组件注册
		局部组件只能在注册他的父组件中使用
		1.定义一个组件对象
		var HelloJack = {
			data: function(){
				return {
					msg: '窗外的麻雀'
				}
			},
			template: '<div>{{msg}}</div>'
		};
		2.在Vue对象中注册
		var vm = new Vue({
			el:'#app',
			components: {
				'hello-jack': HelloJack,
				'hello-marry': HelloMarry,
				'hello-tom': HelloTom
			}		
		});
	 */
	var HelloJack = {
		data: function(){
			return {
				msg: '窗外的麻雀'
			}
		},
		template: '<div>{{msg}}</div>'
	};
	var HelloMarry = {
		data: function(){
			return {
				msg: '在电线杆上多嘴'
			}
		},
		template: '<div>{{msg}}</div>'
	};
	var HelloTom = {
		data: function(){
			return {
				msg: '你说着一句'
			}
		},
		template: '<div>{{msg}}</div>'
	};
		var vm = new Vue({
			el:'#app',
			data:{
				 
			},
			components: {
				'hello-jack': HelloJack,
				'hello-marry': HelloMarry,
				'hello-tom': HelloTom
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>