How to read and write the variables of the Router Component in app.js

Questions
1

I created a Router Component, how to read myData, myVirtualList, myMethod in app.js?

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="title">Virtual List</div>
        <div class="subnavbar">
          <form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title"
                class="searchbar searchbar-init">
            <div class="searchbar-inner">
              <div class="searchbar-input-wrap">
                <input type="search" placeholder="Search"/>
                <i class="searchbar-icon"></i>
                <span class="input-clear-button"></span>
              </div>
              <span class="searchbar-disable-button if-not-aurora">Cancel</span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="searchbar-backdrop"></div>
    <div class="page-content">
      <div class="list simple-list searchbar-not-found">
        <ul>
          <li>Nothing found</li>
        </ul>
      </div>
      <div class="list virtual-list media-list searchbar-found"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        myData: {
          firstName: 'John',
          lastName: 'Doe',
        },
      }
    },
    on: {
      pageInit: function () {
        var self = this;
        var app = self.$app;

        // Dummy items array
        var items = [];
        for (var i = 1; i <= 10000; i++) {
          items.push({
            title: 'Item ' + i,
            subtitle: 'Subtitle ' + i
          });
        }

        var myVirtualList = app.virtualList.create({
          // List Element
          el: '.virtual-list',
          // Pass array with items
          items: items,
          // Custom search function for searchbar
          searchAll: function (query, items) {
            var found = [];
            for (var i = 0; i < items.length; i++) {
              if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
            }
            return found; //return array with mathced indexes
          },
          // List item Template7 template
          itemTemplate:
            '<li>' +
            '<a href="#" class="item-link item-content">' +
            '<div class="item-inner">' +
            '<div class="item-title-row">' +
            '<div class="item-title">{{title}}</div>' +
            '</div>' +
            '<div class="item-subtitle">{{subtitle}}</div>' +
            '</div>' +
            '</a>' +
            '</li>',
          // Item height
          height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46),
        });
      },
    },
    methods: {
      myMethod: function () {
        console.log('my log')
      },
    },
  }
</script>
2

Это плохая практика, но получить доступ к текущему компоненту можно так:

myView.router.currentPageEl.f7Component

3

What do you think is better? This issue is what I asked.

4

Я думаю, нужно работать через события.https://framework7.io/docs/events.html