VUE—从入门到飞起（四）

￡神魔★判官ぃ 2023-02-21 02:25 17阅读 0赞

**目录**

组件

组件创建方式

组件中的data和methods

组件切换方式

父组件向子组件传值

父组件把方法传递给子组件

案例：评论添加及列表显示

ref获取dom和组件

--------------------

[VUE—从入门到飞起（一）][VUE]

[VUE—从入门到飞起（二）][VUE 1]

[VUE—从入门到飞起（三）][VUE 2]

[VUE—从入门到飞起（四）][VUE 3]

[VUE—从入门到飞起（五）][VUE 4]

# 组件 #

## 组件创建方式 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>创建组件1</title>
    		<script src="../../../thirdlib/vue/vue.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			
    			
    			<my-com1></my-com1>
    		</div>
    		<script>
    			//1.1使用Vue.extend来创建全局Vue组件
    			/*var com1 = Vue.extend({
    				//通过template属性，指定了组件要展示的html结构
    				template: '<h3>这是用Vue.extend创建的组件</h3>'
    			})*/
    			//1.2使用Vue.component('组建的名称', 创建出来的组件模板对象)
    			//Vue.component('myCom1', com1);
    			
    			//这里也可以不用分开
    			Vue.component('myCom1', Vue.extend({
    				template: '<h3>这是用Vue.extend创建的组件</h3>'
    			}));
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					
    				},
    				methods:{
    					
    				}
    			})
    		</script>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>创建组件2</title>
    		<script src="../../../thirdlib/vue/vue.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<my-com1></my-com1>
    		</div>
    		<script>
    			
    			Vue.component('myCom1', {
    				template:'<div><h3>这是直接使用Vue.component创建的组件</h3><span>123</span></div>'
    			});
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					
    				},
    				methods:{
    					
    				}
    			})
    		</script>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>用template创建组件</title>
    		<script src="../../../thirdlib/vue/vue.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<my-com1></my-com1>
    		</div>
    		
    		<div id="app2">
    			<my-com2></my-com2>
    		</div>
    		
    		
    		<template id="tmpl">
    			<div>
    				<h1>这是通过template在外部定义的组件结构，这个方式有代码的提示</h1>
    				<h4>好用</h4>
    			</div>
    		</template>
    		<script>
    			
    			Vue.component('myCom1', {
    				template:'#tmpl'
    			});
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    				},
    				methods:{
    				}
    			});
    			var vm2 = new Vue({
    				el:"#app2",
    				data:{
    				},
    				methods:{
    				},
    				components:{
    					//定义实例内部私有组件
    					myCom2:{
    						template:'#tmpl'
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

## 组件中的data和methods ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>组件中data和methods</title>
    		<script src="../../../thirdlib/vue/vue.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			
    			<mycom1></mycom1>
    			<hr />
    			<mycom1></mycom1>
    			<hr />
    			<mycom1></mycom1>
    			<hr />
    		</div>
    		
    		<template id="temp">
    			<div>
    				<input type="button" value="+1" @click="add" />
    				<h3>{
       { count }}</h3>
    			</div>
    		</template>
    		<script>
    			//1.组件可以有自己的data数据，
    			//2.组件的data和实例的data不一样。实例 的data是一个对象；组件中的data是一个function，并且return一个对象。
    			//3.组件中的data和实例中的data使用方式完全一样
    			Vue.component('mycom1', {
    				template:'#temp',
    				data:function(){
    					return {
    						count:0
    					}
    				},
    				methods:{
    					add(){
    						this.count ++;
    					}
    				}
    			});
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    				},
    				methods:{
    				}
    			})
    		</script>
    	</body>
    </html>

## 组件切换方式 ##

<div id="app">
    	
    	<a @click.prevent="flag = true" href="">登录</a>
    	<a @click.prevent="flag = false" href="">注册</a>
    	<login v-if="flag"></login>
    	<regest v-else></regest>
    </div>
    
    <script>
    	Vue.component('login', {
    		template:'<h3>登录组件</h3>'
    	});
    	Vue.component('regest', {
    		template:'<h3>注册组件</h3>'
    	});
    	
    	var vm = new Vue({
    		el:"#app",
    		data:{
    			flag:false
    		},
    		methods:{
    		}
    	})
    </script>

<div id="app">
    	<a @click.prevent="flag = 'login'" href="">登录</a>
    	<a @click.prevent="flag = 'regest'" href="">注册</a>
    	
    	
    	<component :is="flag"></component>
    </div>
    
    <script>
    	//组件名称是字符串
    	Vue.component('login', {
    		template:'<h3>登录组件</h3>'
    	});
    	Vue.component('regest', {
    		template:'<h3>注册组件</h3>'
    	});
    	
    	var vm = new Vue({
    		el:"#app",
    		data:{
    			flag:'login'
    		},
    		methods:{
    		}
    	})
    </script>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>组件切换动画</title>
    		<script src="../../../thirdlib/vue/vue.min.js"></script>
    		<style>
    			.v-enter,
    			.v-leave-to {
    				opacity: 0;
    				transform: translateX(150px);
    			}
    			.v-enter-active,
    			.v-leave-active {
    				transition: all 0.5s ease;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<a @click.prevent="flag = 'login'" href="">登录</a>
    			<a @click.prevent="flag = 'regest'" href="">注册</a>
    			
    			
    			
    			<transition mode="out-in">
    				<component :is="flag"></component>
    			</transition>
    		</div>
    		
    		<script>
    			//组件名称是字符串
    			Vue.component('login', {
    				template:'<h3>登录组件</h3>'
    			});
    			Vue.component('regest', {
    				template:'<h3>注册组件</h3>'
    			});
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					flag:'login'
    				},
    				methods:{
    				}
    			})
    		</script>
    	</body>
    </html>

## 父组件向子组件传值 ##

<div id="app">
    	
    	<com1 v-bind:parentmsg="msg"></com1>
    </div>
    
    <script>
    	var vm = new Vue({
    		el:"#app",
    		data:{
    			msg:"123 父组件中的数据"
    		},
    		methods:{},
    		components:{
    			com1:{
    				//结论：子组件中默认无法访问到父组件中data中的数据和methods中的方法
    				template:"<h1 @click='change'>处理这是子组件---{
       { parentmsg }}</h1>",
    				//data数据并不是父组件传递过来的，而是自身私有的
    				//比如，组件通过ajax请求的数据，都可以放在data身上
    				//data中的数据，都是可读可写的，props中的数据都是只读的
    				data:function(){
    					return {
    						title:"123",
    						content:"111"
    					}
    				},
    				//组件中的所有props中的数据，都是通过父组件传递给子组件的
    				props : [//把父组件传递过来的parentmsg，在props中定义一下，这样才能使用这个数据
    					'parentmsg'
    				],
    				methods:{
    					change(){
    					}
    				}
    			}
    		}
    	})
    </script>

## 父组件把方法传递给子组件 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>父组件把方法传递给子组件</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			{
       { msg }}
    			
    			
    			<com2 v-on:func="show"></com2>
    		</div>
    		<template id="temp">
    			<div>
    				<h1>这是子组件</h1>
    				<input type="button" @click="myclick" value="父组件传递的func方法"/>
    			</div>
    		</template>
    		
    		<script>
    			var com2 = {
    				template:'#temp',
    				data(){
    					return {
    						sonmsg:{name:'小头儿子', age:6}
    					}
    				},
    				methods:{
    					myclick(){
    						//如何拿到父组件的show方法，拿到func方法
    						//emit 英文原意 ： 是触发、调用的意思
    						//参数依次写在后面
    						this.$emit('func', this.sonmsg, 321);
    					}
    				}
    			}
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					msg : null
    				},
    				methods:{
    					show(data, data2){
    						this.msg = data;
    						console.log('调用了父组件身上的show方法:' + data + data2);
    					}
    				},
    				components:{
    					com2:com2
    				}
    			})
    		</script>
    	</body>
    </html>

## 案例：评论添加及列表显示 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>评论列表</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<link rel="stylesheet" href="../../../thirdlib/css/bootstrap.min.css" />
    	</head>
    	<body>
    		<div id="app">
    			<cmtbox @fresh="loadComments" @test="test"></cmtbox>
    			
    			<ul class="list-group">
    				<li v-for="item in list" :key="item.id" class="list-group-item">
    					<span class="badge">{
       { item.user }}</span>
    					{
       { item.content}}
    				</li>
    			</ul>
    		</div>
    		
    		
    		<template id="tmpl">
    			<div>
    				<div class="form-group">
    					<label>评论人：</label>
    					<input v-model="user" type="text" class="form-control" />
    				</div>
    				<div class="form-group">
    					<label>评论内容：</label>
    					<textarea v-model="content" class="form-control"></textarea>
    				</div>
    				<div class="form-group">
    					<input @click="add" type="button" value="发表评论" class="btn btn-primary" />
    				</div>
    			</div>
    		</template>
    		<script>
    			var commentBox = {
    				template : "#tmpl",
    				data(){
    					return {
    						user:"",
    						content:""
    					}
    				},
    				methods:{
    					add(){
    						var comment = {id:Date.now(), user : this.user, content:this.content};
    						//从localstorage获取所有评论
    						var list = JSON.parse(localStorage.getItem('cmts') || '[]');
    						list.push(comment);
    						//保存最新的评论数据
    						localStorage.setItem('cmts', JSON.stringify(list));
    						this.user = this.content = "";
    						
    						//触发父组件的刷新数据方法
    						//可以同时绑定多个父组件方法
    						this.$emit('fresh');
    						this.$emit('test');
    					}
    				}
    			}
    			
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					list:[
    						{id:Date.now(), user:'李白', content:'天生我材必有用'},
    						{id:Date.now(), user:'白居易', content:'蜀道之难'},
    						{id:Date.now(), user:'江小白', content:'劝君更尽一杯酒'}
    					]
    				},
    				methods:{
    					loadComments(){
    						//从本地localStorage中加载评论
    						var locallist = JSON.parse(localStorage.getItem('cmts') || '[]');
    						this.list = locallist;
    					},
    					test(){
    						console.log("ok");
    					}
    				},
    				components:{//组件
    					cmtbox:commentBox
    				},
    				created(){
    					this.loadComments();
    				}
    			})
    		</script>
    	</body>
    </html>

## ref获取dom和组件 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>ref获取dom和组件</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<input type="button" ref="btn" value="获取元素" @click="getele" />
    			<h3 ref="myh3">哈哈哈</h3>
    			<hr />
    			<login ref="mylogin"></login>
    		</div>
    		
    		<script>
    			var login = {
    				template:'<h1>登录组件</h1>',
    				data(){
    					return {
    						msg:"组件msg"
    					}
    				},
    				methods:{
    					show(){
    						console.log("调用子组件的方法");
    					}
    				}
    			}
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					
    				},
    				methods:{
    					getele(){
    						//ref 是 reference 引用
    						//console.log(this.$refs.myh3.innerText);
    						console.log(this.$refs.mylogin.msg);
    						this.$refs.mylogin.show();
    					}
    				},
    				components:{
    					login : login
    				}
    			})
    		</script>
    	</body>
    </html>

[VUE]: https://blog.csdn.net/A_art_xiang/article/details/106855763
[VUE 1]: https://blog.csdn.net/A_art_xiang/article/details/106859395
[VUE 2]: https://blog.csdn.net/A_art_xiang/article/details/106996196
[VUE 3]: https://blog.csdn.net/A_art_xiang/article/details/106996285
[VUE 4]: https://blog.csdn.net/A_art_xiang/article/details/106996470