如何扩展 Nuxt 页面组件？

Posted 2023-02-22

【中文标题】如何扩展 Nuxt 页面组件？

【英文标题】：How to extend Nuxt page components?

【发布时间】：2019-05-22 23:02:28

【问题描述】：

我正在用 NUXT 建立一个网站。

我已经在 Pages 文件夹中设置了页面组件。我想要一个 BasePage 组件，然后为新页面扩展这个基本组件，这些新页面将继承基本组件中的常用方法。

我正在尝试使用 mixins，但它不起作用

例如我有：

孩子们：

一页 b 页

家长：

页面混合

mixin（或父级）有一个方法，initPage()。

我也想在孩子中使用相同的方法 initPage()。当我从子页面调用 initPage() 时，我需要从父子页面运行此方法。顺序是先父后子。

基本上，我正在尝试在 NUXT 中执行您通常在 OOP 语言中执行的操作，在该语言中您继承一个基类，然后从子类方法中调用 super.initPage()。

我正在尝试使用 optionMergeStrategies.methods 但没有运气。请帮忙。

谢谢

更新：

我确信可以使用自定义合并策略（使用 optionMergeStrategies 选项）来完成这项工作。我试过但不明白它是如何工作的。所以我需要另一个解决方案。好吧，我所做的只是，在 mixin（或父级）中，我将方法名称命名为 _initPage()（注意下划线），而在页面组件（子级）中，我保留了名称 initPage（不带下划线）。现在我需要做的就是，从一个子组件，并从 initPage() 方法中，我只需使用 _initPage() 调用父方法。这与调用 super.initPage() 完全一样。这可以根据需要应用于任意数量的方法，只需在 mixin（或父）方法中添加下划线，然后从子方法中调用它们。我将 mixin 文件命名为 pageMixins。这个mixin继承了很多方法，如_initPage、_animateIn、_animateOut、_dispose、loadPage...等。

父级（混合文件）：

_initPage: function() 

  // code...

子（页面组件）

initPage: function() 
  this._initPage();

  // code...

【问题讨论】：

在您的问题中包含您的代码和可能的错误

我只需要更好地了解 optionMergeStrategies 的工作原理。这是一个 NUXT/Vue 特定的问题。

【参考方案1】：

为此，最好使用Vuejs Parent-child communication。 Child 向父级发出 (this.$emit('yourEventName')) 事件，父级 监听该 (<child-component @yourEventName='initPage'>) 事件，然后调用它的相应函数（在父组件中）。然后子组件继续在它的函数中运行语句（initPageInChild () this.$emit('yourEventName'); // after parent done run other statemnts here 。你也可以看到这个答案https://***.com/a/40957171/9605654（很好解释）

const mainVue = new Vue(),
        parentComponent = new Vue(
          el: '#parent',
          mounted() 
            this.$nextTick(() => 
              console.log('in parent')
              // in nuxt instead of mainVue use this 
              mainVue.$on('eventName', () => 
                this.parentMsg = `I heard event from Child component $++this.counter times..`;
              );
            )
          ,
          data: 
            parentMsg: 'I am listening for an event..',
            counter: 0
          
        ),
        childComponent = new Vue(
          el: '#child',
          methods: 
          initPageInChild: function () 
            mainVue.$emit('eventName');
            this.childMsg = `I am firing an event $++this.counter times..`;
          
        ,
        data: 
          childMsg: 'I am getting ready to fire an event.',
          counter: 0
        
      );

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="parent">
  <h2>Parent</h2>
  <p>parentMsg</p>
</div>

<div id="child">
  <h2>Child</h2>
  <p>childMsg</p>
  <button @click="initPageInChild">Child Call</button>
</div>

【讨论】：

谢谢。但是在我看来，在这种情况下使用事件并不是一个合适的解决方案。我做了一些更简单的事情。我更新了我的初始帖子。

啊，我明白了。所以你需要在项目中添加一些全局方法。你说你不能在 nuxt 项目中使用 mixins。我认为mixins可以作为插件添加到nuxt项目中：在plugins文件夹中创建mixins.js（在那里添加你的全局方法）然后将它作为插件连接到nuxt.config.js中。它应该工作

不，我不需要全局方法。 NUXT 内置了 Pages。Pages 是 Vue 组件。我只需要添加一个 BasePage ，所有 Pages 都可以从中继承其方法。我只需要通过扩展一个基本组件来向 Pages 添加继承。我按照自己的方式做到了，既简单又有效。

【参考方案2】：

如果对此感兴趣，这里是扩展 Nuxt.js 页面组件的解决方案

就我而言，我有一个添加项目的页面和一个编辑现有项目的页面，它们是相似的。但是由于 Nuxt 的路由机制，我需要为它准备 2 个文件。所以add.vue 文件看起来像这样

<script>
import EditItemPage from './_id/edit'

export default 
  extends: EditItemPage 
  // you can add `data()`, `methods`, `computed` below this line

</script>