涉及功能：$emit , @
在components文件夹中新建两个文件，分别为cld10.vue父组件,cld11.vue子组件
在router文件夹index.js文件中新增两个文件在首页的点击跳转按钮
{
name:'cld10第10页',
// 既是地址也是参数
path:'/cld10/:dyx',
component:()=>import('../components/cld10')
},
{
name:'cld11第11页',
// 既是地址也是参数
path:'/cld11/:dyx',
component:()=>import('../components/cld11')
},在首页helloworld中添加按钮和点击跳转事件
<button @click="jump10">跳转第10页</button>
<button @click="jump11">跳转第11页</button>
jump10(){
this.$router.push({path:'/cld10'+'/'+123})
},
jump11(){
this.$router.push({path:'/cld11'+'/'+123})
},既然cld10.vue是父组件，那么就需要把cld11.vue导入到cld10.vue，形成组件
import cld11 from './cld11.vue'
同时配置组件
components:{
cld11,
}
然后在template中使用 <cld-11></cld-11>
在cld11组件中使用“@”符号
<cld-11 @aa='chuan'></cld-11>
然后配置chuan这一方法，同时为了配置初始数据使用了data
methods:{
chuan(val){
this.zichuanfu=val
},
},
data(){
return{
zichuanfu:'第十页数据'
}
},然后为了配置aa这个“事件”，去cld11.vue中配置信息
<template>
<div>
<h1>第十一页</h1>
<button @click="cli">子传父</button>
</div>
</template>
<script>
export default {
methods:{
cli(){
this.$emit('aa','第十一页方法')
}
}
}
</script>
<style>
</style>为了显示两个页面数据传递产生的变化，在cld10.vue中添加
<h1>{{zichuanfu}}</h1>
保存vscode代码，然后去浏览器中查看
跳转父页面第十页
点击按钮“子传父”
首先这是第十页的页面，分为三部分
第一部分，是第十页原始的信息
第二部分为第十一页原始信息，但是导入了第十页，所以第十页中出现了
第三部分，是动态数据，原始数据是父页面cld10.vue中data中的，然后点击“子传父”从子页面第十一页中获取的.
子传父完整流程介绍完毕
具体代码如下：(存在冗余代码)
index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//import
import hi from '../components/HelloWorld.vue'
// import cld1 from '../components/cld1.vue'
//export default 就是导出,用模块化导出
export default new Router({
mode:'history',
routes:[
{
name:'首页',
path:'/',
component:hi
},
{
name:'cld1第一页',
path:'/cld1',
component:()=>import('../components/cld1')
},
{
name:'cld2第2页',
path:'/cld2/:dyx/:jk',
component:()=>import('../components/cld2')
},
//路由懒加载
{
name:'cld3第3页',
path:'/cld3/:dyx/:jk',
component:()=>import('../components/cld3')
},
{
name:'cld4第4页',
path:'/cld4/:dyx/',
component:()=>import('../components/cld4')
},
{
name:'cld5第5页',
// 既是地址也是参数
path:'/cld5/:dyx/:jk',
component:()=>import('../components/cld5')
},
{
name:'cld6第6页',
// 既是地址也是参数
path:'/cld6/:dyx',
component:()=>import('../components/cld6')
},
{
name:'cld6第7页',
// 既是地址也是参数
path:'/cld7/:dyx',
component:()=>import('../components/cld7')
},
{
name:'cld6第8页',
// 既是地址也是参数
path:'/cld8/:dyx',
component:()=>import('../components/cld8')
},
{
name:'cld10第10页',
// 既是地址也是参数
path:'/cld10/:dyx',
component:()=>import('../components/cld10')
},
{
name:'cld11第11页',
// 既是地址也是参数
path:'/cld11/:dyx',
component:()=>import('../components/cld11')
},
]
})
HelloWorld.vue
<template>
<div class="hello">
<h1>首页</h1>
<button @click="jump1">跳转到第1页</button>
<button @click="jump2">跳转第二页</button>
<button @click="jump3">跳转第三页</button>
<button @click="jump4">跳转第四页</button>
<button @click="jump5">跳转第5页</button>
<button @click="jump6">跳转第6页</button>
<button @click="jump7">跳转第7页</button>
<button @click="jump8">跳转第8页</button>
<br>
<button @click="jump10">跳转第10页</button>
<button @click="jump11">跳转第11页</button>
</div>
</template>
<script>
export default {
name:'HelloWorld',
data(){
return{
flag:567,
session:3,
local:4,
usually:'d3',
gongsi:5,
show:6,
}
},
methods:{
jump1(){
this.$router.push({path:'/cld1'})
},
jump2(){
this.$router.push({name:'cld2第2页',query:{zzz:this.flag,yyy:'333'}}),
sessionStorage.setItem('zsession',this.session),
localStorage.setItem('zlocal',this.local),
localStorage.removeItem('zlocal'),
//{path:}，这些信息可以省略
this.$router.push('/cld2/d3/'+5.1)
},
jump3(){
//this.$router.push({path:'/cld3'}),
//{path:}，这些信息可以省略
this.$router.push('/cld3/'+this.usually+'/'+123)
},
jump4(){
this.$router.push({path:'/cld4'+'/'+123})
},
jump5(){
this.$router.push({path:'/cld5/'+this.gongsi+'/'+123})
},
jump6(){
this.$router.push('/cld6/'+this.show)
},
jump7(){
this.$router.push({path:'/cld7'+'/'+123})
},
jump8(){
this.$router.push({path:'/cld8'+'/'+123})
},
jump10(){
this.$router.push({path:'/cld10'+'/'+123})
},
jump11(){
this.$router.push({path:'/cld11'+'/'+123})
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
cld10.vue
<template>
<div>
<h1>第十页</h1>
<cld-11 @aa='chuan'></cld-11>
<h1>{{zichuanfu}}</h1>
</div>
</template>
<script>
import cld11 from './cld11.vue'
export default {
components:{
cld11,
},
methods:{
chuan(val){
this.zichuanfu=val
},
},
data(){
return{
zichuanfu:'第十页数据'
}
},
}
</script>
<style>
</style>cld11.vue
<template>
<div>
<h1>第十一页</h1>
<button @click="cli">子传父</button>
</div>
</template>
<script>
export default {
methods:{
cli(){
this.$emit('aa','第十一页方法')
}
}
}
</script>
<style>
</style>
