Реиспользование блока

Проект развернул на 5ой версии с использованием core компонентов (те что в файлах *.f7.html). В разных компонентах используется один и тот же html-блок, который строится в цикле c использованием прочих параметров, получаемых из объекта от data().

Хочется этот блок не копипастить, а оформить в виде отдельного компонента и потом во всех этих местах запользовать.

Почитал тут и непонравилось inline-определение шаблона, прямо в js. Попробовал оформить в отдельном файле:

<!-- test-component.f7.html -->
<template>
    <div>{{test}}</div>
</template>

<script>
    import {Component} from 'framework7';

    export default class extends Component {
        data() {
            return {
                test: 'test ok',
            };
        }
    };
</script>

При использовании получаю следующее:

Uncaught (in promise) TypeError: Cannot read property ‘nodeType’ of undefined

И так же непонятно как при использовании компонента передать параметры. ТОлько через html-атрибуты?

данные передавать через $props:

<my-component foo="bar" id="25"></my-component>

Большие данные можно передавать так:

  1. Написать хелпер (способ кривой):
Template7.registerHelper('jsonStringify', function (data, options) {
    if (data.value && typeof data.value === 'string') {
        data.value  = data.value.replace("'", "&#39;");
    }
    return JSON.stringify(data);
});

затем пропсы json-нить:

<list-item data-item='{{jsonStringify this}}'></list-item>

  1. Завести глобальную переменную в app, а в props передавать ее имя

Вообще, можно получить доступ к data текущего компонента, кто использует этот custom component, но делать так не правильно.

Спасибо. Получается проблема была в том, что я лепил туда класс, а надо было просто объект. Честно говоря, вот этот проброс параметров с промежуточной сериализацией больше похоже на приспособление к ситуации а не выход. На самом деле об этом способе сразу подумалось когда полистал документацию и поэтому спросил, потому что не понравилось.

А как получить доступ к дата текущего компонента? Че то this посмотрел, не нашел ниче, только рут.

Можно получить DOM-узел страницы/попап для текущего компонента, а затем взять из него компонент:

const $pageEl = $('...');
const component = $pageEl[0].f7Component;

или так:
const component = app.views['view-name'].router.currentPageEl.f7Component;

https://github.com/framework7io/framework7/issues/3014#issuecomment-464636533 Владимир говорит, что не нужно обращаться напрямую к компонентам, поэтому лучше использовать вариант через “глобальные” переменные, а в props передавать их имя.

Ну так боле-менее. А можно самому заниматься рендерингом? я имею в виду не вставлять в тело основного компонента, а например сделать хелпер, который будет принимать параметры в основном компоненте а внутри уже возвращать результат отрисовки. типа:

return TestComponent.render(params);

https://framework7.io/docs/router-component.html#component-options тут есть функция render()