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}
];
浙公网安备 33010602011771号