ExtJS 父组件向子组件传参方法：props 和 listeners

ExtJS 提供了多种方法来实现父组件向子组件传参，本文介绍两种常用的方法：props 和 listeners。

1. 使用 props

在父组件中，使用 props 来传递参数到子组件。在子组件中，使用 this.props 来访问这些参数。

父组件：

Ext.define('MyApp.view.Parent', {
    extend: 'Ext.panel.Panel',
    xtype: 'parent',
    
    items: [{
        xtype: 'child',
        myParam: 'Hello World'
    }]
});

子组件：

Ext.define('MyApp.view.Child', {
    extend: 'Ext.panel.Panel',
    xtype: 'child',
    
    initComponent: function() {
        this.callParent(arguments);
        
        console.log(this.myParam); // Output: Hello World
    }
});

2. 使用 listeners

在父组件中，使用 listeners 来监听子组件的事件。在子组件中，触发这些事件，并传递参数。

父组件：

Ext.define('MyApp.view.Parent', {
    extend: 'Ext.panel.Panel',
    xtype: 'parent',
    
    items: [{
        xtype: 'child'
    }],
    
    listeners: {
        childEvent: function(param) {
            console.log(param); // Output: Hello World
        }
    }
});

子组件：

Ext.define('MyApp.view.Child', {
    extend: 'Ext.panel.Panel',
    xtype: 'child',
    
    myMethod: function() {
        this.fireEvent('childEvent', 'Hello World');
    }
});

通过以上两种方法，我们可以轻松地在父组件和子组件之间传递参数，实现组件之间的数据交互。