更新组件外的元素

Posted 2023-02-23

技术标签:

【中文标题】更新组件外的元素【英文标题】：Updating elements outside of a component 【发布时间】：2017-07-11 10:46:17 【问题描述】：

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

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

如果在组件之外，我有一个 H1 用于母版页中包含的页面标题。我将如何更新它？是在 route.js 还是组件文件中做？

【问题讨论】：

您可以在 Vue 方法中调用普通的 javascript 函数。话虽如此，请考虑使用事件和侦听器来做到这一点。一个从组件返回到主app.js文件的事件？如果您可以将标题设为组件，那就更好了，否则您可以使用event bus 或使用 jquery 等在文档本身上引发自定义事件。你知道我在哪里可以找到一些示例，以便我查看代码以使其工作吗？ 【参考方案1】：

解决此问题的最佳方法是拥有一个包含所有静态组件的基础组件，即导航菜单、页脚和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/

【讨论】：

这几乎就是我所拥有的，我想这可能是我的想法。我没有想过嵌套多个组件，这对我有用。感谢您的帮助。

以上是关于更新组件外的元素的主要内容，如果未能解决你的问题，请参考以下文章

父元素的入队React更新是否也总是更新子元素吗？