更新组件外部的元素 [英] Updating elements outside of a component
问题描述
我正在使用Laravel和Vue创建一个具有主layout.blade文件的应用，然后在使用component和VueRouter.
I'm using Laravel and Vue to create an app which has a master layout.blade file and then I'm using component and the VueRouter.
我无法理解的是如何实现以下目标.假设我有两条路由"Home"和"About"，它们分别调用了专用的home.vue和about.vue组件文件.
What I can't get my head around is how to achieve the following. Lets say I have two routes 'Home' and 'About' which call a dedicated home.vue and about.vue component files.
如果在组件外部我有一个H1作为主页中包含的页面标题，该怎么办?我将如何进行更新?可以在route.js或组件文件中执行该操作吗?
What if, outside of the component I have a H1 for the heading of the page contained in the master page. How would I go about updating that? Do I do it in route.js or the component file?
推荐答案
解决此问题的最佳方法是使基本组件具有所有静态组件，即导航菜单，页脚和 router-view .我想您可能会因为在 blade 中创建布局而感到困惑，但是将刀片文件作为进入您的 scripts 和 css 并为Vue提供了一个挂载您的App的位置.因此，您将拥有一个刀片文件，看起来像这样:
The best way to approach this is to have a base component with all your static components i.e. nav menu, footer and router-view. I think you may be getting confused because you are creating your layout in blade, but it's easier to just have a blade file as an entry point that pulls in your scripts and css and gives Vue somewhere to mount your App.So you would have a blade file looking something like this:
<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 中的渲染函数:
You would then create your layout in a base component (normally App.vue) and pass that to your render function in app.js:
import App from './components/App.vue'
new Vue({
router,
render: h => h(App)
}).$mount('#app');
然后您的 App.vue 将具有以下内容:
Then your App.vue would have something like:
<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，显然这些不是单个文件组件，但是它显示了我在说什么的基本概念:
This way you gradually build your app up with components. If you have a fancy header, that can also be a component you place on each page. I've put together a JSFiddle, obviously these aren't single file components, but it shows the basic idea of what I'm talking about: https://jsfiddle.net/k3r3uzpx/
这篇关于更新组件外部的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
