0
내가 folowing 한 경로브로드 캐스트 이벤트 2 개
다음<script>
routes = [
{
path: '/',
component: Home,
children: [{
path: 'nested1',
name: 'nested1',
component: Nested1,
}, {
path: 'nested2',
name: 'nested2',
component: Nested2,
}
]
}
];
</script>
내 Home.vue
<template>
<div class="wrapper">
<div class="toolbar">
<div class="toolbar-actions">
<el-button :plain="true" type="info" @click="goBack" size="small" icon="arrow-left">Back</el-button>
<el-button type="success" @click="onSubmit" size="small" icon="check">Submit</el-button>
</div>
</div>
<el-row>
<el-col :span="4">
<div class="sidemenu-wrapper">
<el-menu :router="true" default-active="0" class="sidemenu" ref="sidemenu">
<el-menu-item index="0" :route="{name: 'nested1'}">nested 1</el-menu-item>
<el-menu-item index="1" :route="{name: 'nested2'}">nested 2</el-menu-item>
</div>
</el-col>
<el-col :span="20">
<router-view></router-view>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
}
},
methods: {
onSubmit() {
// here I want to be able run certain method in
// child route
},
}
};
</script>
그리고 Nested1.vue
<template>
<div class="wrapper">
<el-row>
<el-col :span="4">
<el-from>
<!-- inputs, selects, etc -->
</el-from>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
// bla bla bla
}
},
methods: {
submit() {
// send data to backend
},
}
};
</script>
내가 excute에하는 방법을 찾으려면 Nested1의 submit
메소드를 Home에서 Submit 버튼을 클릭하여 호출합니다. 가능한가? 당신의 Home.vue
변화에
정말 여기에 충분한 정보가있다. 당신이 묻고있는 것이 무엇인지 분명하지 않습니다. – Phil
추측하여 언제나 이벤트 버스를 사용할 수 있습니다 ~ https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication – Phil