Vue.js组件深入解析-优快云博客

本文链接：https://blog.youkuaiyun.com/java_chegnxuyuan/article/details/94547241

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。他可以分为全局组件和局部组件两种。

1.全局组件

需要注意的是，这里的data是一个函数，而不是像前面学的直接提供一个对象。

<body>
		<div id="test">  			
  			<test></test>
		</div> 
	</body>
	
	<script>
		Vue.component('test',{
			template:'<div @click="change">{{msg}}</div>',
			data:function(){
				return {msg:"第一个组件"}
			},
			methods:{
				change:function(){
					alert(11)
				}
			}
		})
		var app = new Vue({
			el: '#test',
			
		})
	</script>

2.局部组件

需要注意的是，在局部组件中注册的时候components后面有一个s。全局组件注册时没有这个s.

<body>
		<div id="test">  			
  			<test></test>
		</div> 
	</body>
	
	<script>
		var templateComponent = {
			template:'<div @click="change">{{msg}}</div>',
			data:function(){
				return {msg:"第一个组件"}
			},
			methods:{
				change:function(){
					alert(11)
				}
			}
		}
		var app = new Vue({
			el: '#test',
			components:{
				'test':templateComponent
			}
			
		})
	</script>

3.父组件通过 Prop 向子组件传递数据

<body>
		<div id="test">  			
  			<test :hello="msg"></test>
		</div> 
	</body>
	
	<script>
		Vue.component('test',{
			props:['hello'],
			template:'<div>{{hello}}</div>',
			data:function(){
				return {msg:"第一个组件"}
			},
			methods:{
				change:function(){
					alert(11)
				}
			}
		})
		var app = new Vue({
			el: '#test',
			data:{
				msg:"组件"
			}
			
		})
	</script>

父组件传递list集合给子组件

<body>
		<div id="test">  			
  			<test :hello="item" v-for="item in msg"></test>
		</div> 
	</body>
	
	<script>
		Vue.component('test',{
			props:['hello'],
			template:'<li>{{hello.message}}</li>',
		})
		var app = new Vue({
			el: '#test',
			data:{
				msg:[
					{ message: 'Foo' },
			      	{ message: 'Bar' }
				]
			},
			methods:{
				test:function(val){
					alert(val)
				}
			}
			
		})

<body>
		<div id="test">  			
  			<test :hello="msg"></test>
		</div> 
	</body>
	
	<script>
		var templateComponent = {
			props:["hello"],
			template:'<div @click="change">{{hello}}</div>'
		}
		var app = new Vue({
			el: '#test',
			data:{
				msg:"组件"
			},
			components:{
				'test':templateComponent
			}
			
		})
	</script>

4.子组件可以使用 $emit 触发父组件的自定义事件

<body>
		<div id="test">  			
  			<test :hello="msg" @change1="test"></test>
		</div> 
	</body>
	
	<script>
		Vue.component('test',{
			props:['hello'],
			template:'<div @click="change()">{{hello}}</div>',
			methods:{
				change:function(){
					this.$emit('change1',"测试")
				}
			}
		})
		var app = new Vue({
			el: '#test',
			data:{
				msg:"组件"
			},
			methods:{
				test:function(val){
					alert(val)
				}
			}
			
		})
	</script>

5.在组件上使用v-model

<body>
		<div id="test">  			
  			<test :value="price" @input="onInput"></test>
			<p>{{price}}</p>
		</div> 
	</body>
	 
	<script>
		Vue.component('test',{
			props:['value'],
			template:'<input type="text" :value="value" @input="updateValue($event.target.value)"></input>',
			methods:{
				updateValue:function(val){
					//var value = $("#ceshi").val();
					this.$emit('input',val);
				}
			}
		})
		var app = new Vue({
			el: '#test',
			data:{
				price:100
			},
			methods:{
				onInput:function(val){
					this.price = val
				}
			}
			
		})
	</script>

6.动态切换组件

<component> 元素是vue 里面的一个内置组件。

在<component>里面使用 v-bind: is，可以实现动态组件的效果。

<body>
		<div id="test">  			
  			<component v-bind:is="who"></component>
       		<button @click="changeComponent">changeComponent</button>
		</div> 
	</body>
	 
	<script>
		var componentA={
            template:'<div style="color:red;">this componentA</div>'
        }
        var componentB={
            template:'<div style="color:green;">this componentA</div>'
        }
        var componentC={
            template:'<div style="color:pink;">this componentA</div>'
        }
		var app = new Vue({
			el: '#test',
			data:{
				who:'componentA'
			},
			components:{
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC,
            },
			methods:{
				changeComponent:function(val){
					if(this.who=='componentA'){
                        this.who='componentB';
                    }else if(this.who=='componentB'){
                        this.who='componentC';
                    }else{
                        this.who='componentA';
                    }
				}
			}
			
		})
	</script>

7.组件的第三种创建方式

<body>
		<div id="root">
			<my-component></my-component>
		</div>
		
		<template id="my-div">
			<div>
				我是MT
			</div>
		</template>
		
		<script>
			Vue.component('my-component',{
				template:'#my-div'
			})
			new Vue({
				el:'#root',
				
			})
		</script>
	</body>

但是如果我们在template里面加一句<input type="date" />，则会出现错误。原因是每个组件只能有一个根节点

<template id="my-div">
			<div>
				我是MT
			</div>
			<input type="date" />
		</template>

8.组件的第四种创建方式

<body>
		<div id="root">
			<my-component></my-component>
		</div>
		
		<script type="text/template" id="my-div">
			<div>
				我是MT
			</div>
		</script>
		
		<script>
			Vue.component('my-component',{
				template:'#my-div'
			})
			new Vue({
				el:'#root',
				
			})
		</script>
	</body>