更新组件外部的元素

Question

我正在使用 Laravel 和 Vue 创建一个具有主 layout.blade 文件的应用程序，然后我正在使用组件和 VueRouter。

我无法理解的是如何实现以下目标。假设我有两条路线 'Home' 和 'About' 调用专用的 home.vue 和 about.vue 组件文件。

如果在组件外部我有一个 H1 作为母版页中包含的页面标题怎么办。我将如何更新它？我是在 route.js 中还是在组件文件中进行？

Answer 1

解决这个问题的最佳方法是拥有一个包含所有静态组件的基础组件，即导航菜单、页脚和 router-view。我认为您可能会感到困惑，因为您是在 blade 中创建布局，但是将 blade 文件作为入口点来引入 scripts 和 [=16] 会更容易=] 并给 Vue 一个地方来挂载你的 App.So 你会得到一个看起来像这样的 blade 文件：

<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>

通过这种方式，您可以逐步使用组件构建您的应用程序。如果你有一个花哨的header，那也可以是你放置在每个页面上的一个组件。我整理了一个 JSFiddle，显然这些不是单个文件组件，但它显示了我正在谈论的基本概念：https://jsfiddle.net/k3r3uzpx/

更新组件外部的元素

Updating elements outside of a component

laravel

vue.js

vue-router

vue-component

vuejs2