vue 传值与路由

vue 组件传值

一、父传子

父组件和子组件依赖组件标签取得关联，在组件标签上所有属性构成的集合在子组件的props属性里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{mes}}</p>
			<heads :name="mes"></heads>
			<!--组件标签 使用v-bind绑定name属性-->
		</div>
	</body>
</html>
<template id="temp1">
	<div>
	　　<p class="titl">{{title}}</p>
	</div>
</template>
<script>	
	let Heads = {
		template:"#temp1",
		props:["name"],      // props属性 组件标签所有属性的集合
		data:function(){
			return{
				title:"子组件的内容"
			}
		},
		mounted(){
			this.title = this.$props.name;
			//赋值 把父组件的数据传给子组件
		}
	};
	let app = new Vue({
		el:"#app",
		data:{
			mes:"父组件的内容"
		},
		components:{
			heads:Heads
		}
	});
</script>

二、子传父

首先给子组件标签添加ref 属性；在父组件下使用this.$refs 获取子组件标签的相关信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{mes}}</p>
			<heads ref="aa"></heads>
　　　　　　　　　　　　　　　<!-- 添加ref属性-->
		</div>
	</body>
</html>
<template id="temp1">
	<div>
	　　<p class="titl">{{title}}</p>
	</div>
</template>

<script>	
	let Heads = {
		template:"#temp1",
		data:function(){
			return{
				title:"子组件的内容"
			}
		}
	};
	
	let app = new Vue({
		el:"#app",
		data:{
			mes:"父组件的内容"
		},
		components:{
			heads:Heads
		},
		mounted(){
			this.mes = this.$refs.aa.title;
　　　　　　　　　　　　　　console.log(this.$refs.aa);//获取子组件标签相关信息
		}
	});
</script>

三、通过事件传值

在子组件下定义一个事件，用于自定义事件。创建的方法是this.$emit 两个参数：事件名和需要传递的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<son @change="fn2" :info="msg"></son>
　　　　　　　　　　　　　　<!--使用v-on绑定 change->自定义事件名  fn2->方法-->
		</div>
	</body>
</html>

<template id="temp1">
	<div>
		<p @click="fn">{{cont}}</p>
	</div>
</template>

<script>	
	let Son = {
		template:"#temp1",
		data:function(){
			return{
				cont:"子组件"
			}
		},
		props:["info"],
		methods:{
			fn(){
				//this.$emit("事件名",数据)
				this.$emit("change",this.cont = this.$props.info);
			}
		}
	};
	
	let app = new Vue({
		el:"#app",
		data:{
			msg:"父组件"
		},
		components:{
			son:Son
		},
		methods:{
			fn2(res){//接收到的数据
				this.msg = res;
			}
		}
	});
</script>

四、动态组件

借助component组件，用于动态切换is属性的值，本质就是切换子组件标签

应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			* {margin:0;padding:0;list-style:none;}
			#app {position:relative;width:800px;margin:50px auto 0;border:1px solid #000;}
			ul {display:flex;}
			ul li {flex:1;height:40px;line-height:40px;text-align: center;}
			.cont {position:absolute;left:-1px;top:40px;width:800px;height:400px;line-height:400px;text-align:center;border:1px solid #000;}
			.on {background:blue;color:#fff;}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<ul>
					<li v-for="(val,index) of listTitle" @click="change(index)" :class="{on:index==n}">{{val}}</li>
				</ul>
			</div>
			<div>
				<component v-bind:is="content">
					<!--<news></news>-->  <!--其实就是切换组件标签-->
				</component>
			</div>
		</div>
	</body>
</html>
<template id="news">
	<div>
		<p class="cont">news</p>
	</div>
</template>

<template id="foods">
	<div>
		<p class="cont">foods</p>
	</div>
</template>

<template id="travel">
	<div>
		<p class="cont">travel</p>
	</div>
</template>

<template id="teach">
	<div>
		<p class="cont">teach</p>
	</div>
</template>

<script>
	let News = {
		template:"#news"
	};
	
	let Foods = {
		template:"#foods"
	};
	
	let Travel = {
		template:"#travel"
	};
	
	let Teach = {
		template:"#teach"
	};
	
	let app = new Vue({
		el:"#app",
		data:{
			listTitle:["新闻","美食","旅游","教育"],
			content:"news",
			arr:["news","foods","travel","teach"],
			n:0
		},
		components:{
			news:News,
			foods:Foods,
			travel:Travel,
			teach:Teach
		},
		methods:{
			change(index){
				this.n = index;
				this.content = this.arr[index];
			}
		}
	});
</script>

路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入Vue和VueRouter插件-->

		<script src="js/vue.js"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
		<!--模板里添加链接-->
		<!--默认会被渲染成一个a标签  to为我们自己定义的路由-->
		<router-link to="/index">首页</router-link>
		<router-link to="/list">列表页</router-link>
		<router-link to="/detail">详情页</router-link>

		<router-view>
			<!--路由匹配的组件渲染到这里 存放组件标签-->
		</router-view>
			
		</div>
	</body>
</html>
<template id="index">
<div>
	<p>index</p>
</div>
</template>

<template id="list">
<div>
	<p>list</p>
</div>
</template>

<template id="detail">
<div>
	<p>detail</p>
</div>
</template>

<script>
//定义路由组件
	let Index = {
		template:"#index"
	};
	
	let List = {
		template:"#list"
	};
	
	let Detail = {
		template:"#detail"
	};
	
//配置路由	
	let routs = [
		{path:"/index",component:Index},   //每个路由path 对应相应的组件
		{path:"/list",component:List},
		{path:"/detail",component:Detail}
	];
//实例化路由 传入routs配置
	let router = new VueRouter({
		routes:routs
	});
	
	let app = new Vue({
		el:"#app",
		router:router //挂载路由
	});
</script>

路由参数

定义路由路径的时候，可以指定参数，通过this.$route.params.参数名获取对应的参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/index/1">首页</router-link>
			<router-link to="/list">列表页</router-link>
			<router-link to="/detail">详情页</router-link>
			<router-view>
				
			</router-view>
		</div>
	</body>
</html>
<template id="index">
	<div>
		<p>index</p>
	</div>
</template>

<template id="list">
	<div>
		<p>list</p>
	</div>
</template>

<template id="detail">
	<div>
		<p>detail</p>
	</div>
</template>
<script>
	let Index = {
		template:"#index",
		mounted(){
			console.log(this.$route.params.id);
　　　　　　　　　　　　　　//通过this.$route.params.参数名 获取对应的参数
		}
	};
	
	let List = {
		template:"#list"
	};
	
	let Detail = {
		template:"#detail"
	};
	
	let routs = [
	//定义路由路径的时候，可以指定参数。
		{path:"/index/:id",component:Index},
		{path:"/list/",component:List},
		{path:"/detail/",component:Detail}
	];
	
	let router = new VueRouter({
		routes:routs
	});
	
	let app = new Vue({
		el:"#app",
		data:{},
		router:router
	});
</script>

路由嵌套

路由嵌套和普通路由基本一样在需要嵌套的模板中添加router-link，通过children属性定义子路由

<template id="list">
	<div>
		<p>list</p>
		<!--嵌套路由-->
		<router-link to="/list/proa">a</router-link>
		<router-link to="/list/prob">b</router-link>
		<router-view>
			
		</router-view>
	</div>
</template>



//配置路由
	let routs = [
		{path:"/index",component:Index},
		{path:"/list",component:List,
			children:[               //添加children属性
				{path:"/list/proa",component:Proa},
				{path:"/list/prob",component:Prob}
			]		
		},
		{path:"/detail",component:Detail}
	];

猜你喜欢