Лучший способ приблизиться к этому - иметь базовый компонент со всеми вашими статическими компонентами, например, навигационное меню, нижний колонтитул и router-view. Я думаю, вы можете запутаться, потому что вы создаете свой макет в blade, но проще всего, чтобы файл лезвия был точкой входа, который тянет в ваших scripts и css и дает Vue где-то монтировать ваше приложение. Так что у вас будет лопасть файл, выглядящий примерно так:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<link href="/css/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app">
</div>
<script src="/js/app.js"></script>
</body>
</html>
Вы бы затем создать макет в базовом компоненте (обычно App.vue) и передать в вашей визуализации функции в app.js:
import App from './components/App.vue'
new Vue({
router,
render: h => h(App)
}).$mount('#app');
тогда ваш App.vue будет что-то например:
<template>
<nav-menu></nav-menu>
<router-view></router-view>
<app-footer></app-footer>
</template>
<script type="text/javascript">
import NavMenu from './components/NavMenu.vue'
import AppFooter from './components/AppFooter.vue'
export default{
components:{
NavMenu,
AppFooter
}
}
</script>
Таким образом, вы постепенно создаете свое приложение с помощью компонентов. Если у вас есть причудливый заголовок, который также может быть компонентом, который вы размещаете на каждой странице. Я собрал JSFiddle, очевидно, что это не отдельные файловые компоненты, но он показывает основную идею того, что я говорю: https://jsfiddle.net/k3r3uzpx/
Вы можете вызвать обычные функции javascript внутри методов Vue. С учетом сказанного, рассмотрите возможность использования событий и слушателя для этого. –
Событие от компонента обратно в основной файл app.js? –
Если вы можете сделать заголовок компонентом, лучше, иначе вы можете использовать [event bus] (https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication) или поднять пользовательские событие, использующее jquery или подобное в самом документе. –