首先需要给两个页面配置路由,配置结束后如下:
{
path: '/',
name: 'Father',
component:()=>import('@/views/admin/Father.vue'),
},
{
path: '/son',
name: 'Son',
component:()=>import('@/views/admin/Son.vue'),
},
父组件:
<template>
<div>
<h1>父组件</h1>
<h1>{{msg}}</h1>
<Son msg="我来自于父组件" @showMsg='showMsg'></Son>
</div>
</template>
<script>
import Son from './Son.vue'
export default {
data(){
return {
msg :'',
}
},
components: {
Son
},
methods:{
showMsg(val){
this.msg = val
}
}
}
</script>
<style>
</style>
子组件:
<template>
<div>
<h2>子组件</h2>
<h3>{{ msg }}</h3>
<h3>{{ msgs }}</h3>
<el-button type="primary" @click="passMsg">传值给父</el-button>
</div>
</template>
<script>
export default {
data() {
return{
}
},
props: {
msg: {
type: String,
default: "",
},
msgs: {
type: String,
default: "",
},
},
methods: {
passMsg() {
this.$emit('showMsg','我来自子组件');
},
},
};
</script>
<style>
</style>