带有数据绑定文本的敲除自定义组件

Question

我有一个自定义组件，我们称之为mycomp ，它访问它在其模板中传递的文本，如下所示：

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

我在另一个组件中使用这个组件并尝试像这样向它传递文本：

<mycomp data-bind='text: myProperty'></mycomp>

当我尝试运行它时，我得到

Unable to process binding "component: function(){return l}"
Message: Multiple bindings (text and component) are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element.

有没有办法解决这个问题并做我想做的事情，即在另一个组件中使用一个组件并通过data-bind='text: ...'传递文本？

Answer 1

“文本”绑定仅在与原生 dom 元素（div、span 等）或虚拟元素一起使用时才有意义，因为它会使用指定的文本更改所有元素内容。

这就是错误消息所说的（“文本绑定”和组件本身都在尝试更改内容）。

你的组件似乎输出了所有的模板节点，所以我认为如果你这样做的话它会起作用：

<mycomp>hello</mycomp>

---

更新后，我认为您有两个选择：

<mycomp>
    <!-- ko text: myProperty --><!-- /ko -->
</mycomp>

或者为您的组件创建自定义参数，以便您可以执行以下操作：

<mycomp params="text: myProperty"></mycomp>

关于如何做到这一点的详细信息在这里=> https://knockoutjs.com/documentation/component-overview.html

在你的情况下，我认为它会是这样的：

ko.components.register('mycomp', {
    viewModel: function(params) {
        this.text= params.text;
    },
    template:
        '<p data-bind="text: text"></p>'
});