markdown Magento2 - UI组件：进口/出口/链接/ statefull

Posted 2021-05-05

# Magento2 - UI Component: imports/exports/links/statefull

## imports/exports/links/statefull

## Block

**Note:** In this example, we will use:
* theme = ThemeTest
* module = Magento_Theme

_*In this example I used the `default.xml` file to add the block where our UI component will appear._

Under app/design/frontend/[vendorname]/[theme]/[module]/layout/default.xml, let us add the block where the UI component template will appear.
```xml
<block class="Magento\Framework\View\Element\Template" name="magentotheme_basic_ui" template="Magento_Theme::basic-ui.phtml" />  
```
Where:
* **class="Magento\Framework\View\Element\Template"** is the class name used for templated elemens.
* **template="Magento_Theme::basic-ui.phtml"** is the directory where your template is located.
    * ../Magento_Theme/**templates**/basic-ui.phtml

## Template

In ../Magento_Theme/templates/**basic-ui.phtml**, let us create sample code
```html
<h2>Ui Component 3 -- imports/exports/links/statefull</h2>
<div class="example">
    <div data-bind="scope: 'component-b'">
        <h3 data-bind="text: title"></h3>
        <div>value: <span data-bind="text: value"></span></div>
        <div>linkY: <span data-bind="text: linkY"></span></div>
    </div>
    <div data-bind="scope: 'component-a'">
        <h3 data-bind="text: title"></h3>
        <div>amount: <span data-bind="text: amount"></span></div>
        <div>linkV: <span data-bind="text: linkV"></span></div>
        <input data-bind="textInput: input">
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "component-a": {
                        "deps": "component-b",<?php //or  ["component-b", "component-b.child1"] ?>
                        "component": "Magento_Theme/js/view/share-a",
                        "provider": "component-b",
                        "providerProperty": "value"
                    },
                    "component-b": {
                        "component": "Magento_Theme/js/view/share-b"
                    }
                }
            }
        }
    }
</script>
```

Where:
* `"scope: 'component-a'"` is the **component name** under `<script type="text/x-magento-init">`
* `"scope: 'component-b'"` is the **component name** under `<script type="text/x-magento-init">`
* we can list multiple components using `"components"` key.
* we use `"deps"` in `"deps": "component-b"` where the dependency is `"component-b"`. In this example, the `"component-a"` will not work unless we have the `"componten-b"`.

## View Model

Create a `share-a.js` file in ../Magento_Theme/web/js/view

```js
define(['uiComponent'], function(Component) {
    'use strict';

    return Component.extend({
        defaults: {
            title: 'Component A',
            amount: 11,
            linkV: 100,
            input: 'abccdd',
            tracks: {
                amount: true,
                linkV: true,
                input: true
            },
            //!! if "amount" is not trackable, then you should declare "component-b" as deps
            imports: {
                amount: '${ $.provider }:${ $.providerProperty }'
            },
            exports: {
                amount: '${ $.provider }:onReceiveExport'
            },
            links: {
                linkV: '${ $.provider }:linkY'
            },
            listens: {
                input: 'testListens'
            },
            //save in localStorage
            statefull: {
                input: true
            }
        },
        testListens: function (newValue) {
            console.log('Component-a: Listens update >', newValue);
        }
    });
});
```

Create a `share-b.js` file in ../Magento_Theme/web/js/view

```js
define(['uiComponent'], function(Component) {
    'use strict';

    return Component.extend({
        defaults: {
            title: 'Component B',
            value: 10,
            linkY: 110,
            tracks: {
                value: true,
                linkY: true
            }
        },
        onReceiveExport: function (value) {
            console.log('compnent-b: received export', value);
        }
    });
});
```

**Note:** Define dependencies in `define(['uiComponent'], function(...){....});`

#### This is the output of this html code:

[![JMVkf.png](https://a.imge.to/2019/08/19/JMVkf.png)](https://imge.to/i/JMVkf)