Как расширить компоненты страницы Nuxt? - PullRequest
Новая
       7

Как расширить компоненты страницы Nuxt?

0 голосов
/ 23 декабря 2018

Я создаю веб-сайт с NUXT.

Я настроил компоненты страницы в папке Pages.Я хотел бы иметь компонент BasePage, а затем расширить этот базовый компонент для новых страниц, которые будут наследовать общие методы, которые находятся в базовом компоненте.

Я пытаюсь использовать миксины, но он не работает

Например, у меня есть:

Дети:

  • страница a
  • страница b

Родитель:

  • page-mixins

Миксин (или родитель) имеет метод initPage ().

Я также хочу иметь тот же метод initPage (),у детей.Когда я вызываю initPage () из дочерней страницы, мне нужен этот метод для запуска из parent и child.Порядок родительский, потом дочерний.

В основном я пытаюсь сделать в NUXT то, что вы обычно делаете на языке ООП, где вы наследуете базовый класс, а затем вызываете super.initPage () из метода дочернего класса.

Я пытаюсь использовать optionMergeStrategies.methods, но безуспешно.Пожалуйста, помогите.

Спасибо

ОБНОВЛЕНИЕ:

Я уверен, что возможно выполнить эту работу, используя собственную стратегию слияния (используя опцию optionMergeStrategies),Я пытался, но не понимаю, как это работает.Поэтому мне нужно было другое решение.Ну, все, что я сделал, это то, что в mixin (или родительском) я сделал имя метода _initPage () (обратите внимание на подчеркивание), в то время как в компонентах страницы (дочерние элементы) я сохранил имя initPage (без подчеркивания).Теперь все, что мне нужно сделать, это из дочернего компонента и из метода initPage () я просто вызываю родительский метод с помощью _initPage ().Это ведет себя так же, как вызов super.initPage ().Это можно применить ко всем методам, которые вам нужны, просто добавьте подчеркивание в методы mixin (или parent) и вызовите их из дочернего элемента.Я назвал миксиновый файл, pageMixins.У этого миксина есть много унаследованных методов, таких как _initPage, _animateIn, _animateOut, _dispose, loadPage ... и т. Д.* 

initPage: function() {
  this._initPage();

  // code...

}

1 Ответ

0 голосов
/ 24 декабря 2018

Для этого лучше использовать Vuejs Parent-child communication . Child испускает (this.$emit('yourEventName')) событие для родителя, а parent прослушивает это (<child-component @yourEventName='initPage'>) событие, чем вызывает соответствующую ему функцию (в родительском компоненте).Затем дочерний компонент продолжает выполнять операторы в своей функции (initPageInChild () { this.$emit('yourEventName'); // after parent done run other statemnts here }. Вы также можете увидеть этот ответ https://stackoverflow.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>
...