如何将数据向下传递多层敲除组件

Question

我有一种情况，我试图将一些重复的代码包装到组件中。这工作正常，直到我想将一些数据从父范围传递到嵌套在多个其他组件中的组件。

在我的示例中，我希望能够获取顶级范围内的 someobservable 值，一直到 myrow 组件，以在跨度内显示。理想情况下，我不想每次都手动向下传递数据，有没有一种方法可以让数据从父级继承？

顶级范围，我的两个新组件相互嵌套

<mygroup>
    <myrow>
        <span data-bind="text: someobservable()"></span>
    </myrow>
</mygroup>

我可以通过在对象前添加 $context.$parentContext.$parent. 来让它做我想做的事，但理想情况下我不想这样做，因为它会使一切变得非常混乱。

<mygroup>
    <myrow>
        <span data-bind="text: context.$parentContext.$parent.someobservable()"></span>
    </myrow>
</mygroup>

mygroup.js - 我的第一个组件

import template from './mygroup.html';
const ko = require('knockout');

const viewModel = function (params) {
    const self = this;
};

ko.components.register('mygroup', { viewModel, template });

mygroup.html

<div>
    <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->
</div>

myrow.js - 我的第二个组件

import template from './myrow.html';
const ko = require('knockout');

const viewModel = function (params) {
    const self = this;
};

ko.components.register('myrow', { viewModel, template });

myrow.html

<div>
    <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->
</div>

Answer 1

我找到了一个我对结果半满意的解决方案，如果有人能提出更好的解决方案，我很乐意听到。

<mygroup params="data: $data">
    <myrow params="data: $data">
        <span data-bind="text: someobservable()"></span>
    </myrow>
</mygroup>

mygroup.js - 我的第一个组件

import template from './mygroup.html';
const ko = require('knockout');

const viewModel = function (params) {
    const self = this;
    this.data = ko.observable(params.data);
};

ko.components.register('mygroup', { viewModel, template });

mygroup.html

<div>
    <!-- ko template: { nodes: $componentTemplateNodes, data: data } --><!-- /ko -->
</div>

myrow.js - 我的第二个组件

import template from './myrow.html';
const ko = require('knockout');

const viewModel = function (params) {
    const self = this;
    this.data = ko.observable(params.data);
};

ko.components.register('myrow', { viewModel, template });

myrow.html

<div>
    <!-- ko template: { nodes: $componentTemplateNodes, data: data } --><!-- /ko -->
</div>

如何将数据向下传递多层敲除组件

How to pass data down multiple layers of knockout components

javascript

knockout.js