Nativescript中自定义组件和页面之间的事件答案

【问题标题】：Event between custom component and page in NativescriptNativescript中自定义组件和页面之间的事件
【发布时间】：2020-03-20 00:43:50
【问题描述】：

在我的 NativeScript (JS/Core) 应用程序中，我有一个自定义组件，里面有一个按钮：

mycomp.xml

<!-- mycomp.xml -->
<StackLayout loaded="onLoaded">
  <Button text="{{ label }}" tap="onTap" />
  ...
</StackLayout>

mycomp.js

/* mycomp.js */
function onLoaded(args) {
    const obj = args.object;
    obj.bindingContext = {
        label: obj.label
    };
}

function onTap(args) {
    console.log('comp button tap'); // fired
}

page.xml

<!-- page.xml -->
<Page xmlns:mycomp="components/mycomp" xmlns="http://schemas.nativescript.org/tns.xsd">
...
<mycomp:mycomp label="Test" tap="onButtonTap" />
...
</Page>

page.js

/* page.js */
exports.onButtonTap = function(args) {
  console.log('Button Tap'); // not fired
}

如何将组件内的点击事件传递给页面事件“onButtonTap”？

【问题讨论】：

自定义组件有自己的视图模型还是继承父级？如果它继承了父级，则无需专门传递任何内容，只需在父页面的视图模型中定义回调函数并将其绑定到组件中的点击事件即可。
play.nativescript.org/?template=play-tsc&id=dfavSH
非常感谢 Manoj 和 Nick lliev。这对我帮助很大。

标签： javascript events data-binding components nativescript

【解决方案1】：

因为我想在不同的页面上多次使用我的组件，所以我在此处的 cmets 的帮助下制定了这个解决方案。

// home-view-model.js
const fromObject = require("tns-core-modules/data/observable").fromObject;
function createViewModel() {
    var viewModel = fromObject({
        compdata: {
            foo: "bar",
            ontap: function(args) {
                console.log('button tap');
            }
        }
    });

    return viewModel;
}

exports.createViewModel = createViewModel;

<!-- home-page.xml -->
<Page xmlns:mycomp="components/mycomp" xmlns="http://schemas.nativescript.org/tns.xsd">
...
<mycomp:mycomp compdata="compdata" />
...
</Page>

// mycomp.js
const fromObject = require("tns-core-modules/data/observable").fromObject;
function onLoaded(args) {
    const obj = args.object;
    obj.bindingContext = fromObject(obj.compdata);
}

<!-- mycomp.xml -->
<StackLayout loaded="onLoaded">
  <Button text="{{ foo }}" tap="{{ ontap }}" />
  ...
</StackLayout>

【讨论】：