LOGO

动态子组件如何传递消息给父组件?

编辑本文

组件的创建中，可能需要在运行时，通过状态树渲染出一个动态组件树。通常的方法，我们通过 dispatch/message 但是由于父组件及子组件都是单独动态创建的，因此父子组件之间实际上是没有父子关系的，因此需要将子组件的parentComponent指向父组件，以实现动态父子组件之间的消息传递。

example

此处给一个简单的例子，我们需要根据一个简单的状态树实现一个相应的组件样式，并实现父子组件的通信：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const Child = san.defineComponent({
    template: `
        <div class="child">
            {{name}}<button on-click="sendMsg">send msg</button>
        </div>
    `,
    sendMsg() {
        this.dispatch('child-msg', this.data.get('msg'));
    }
});

const Parent = san.defineComponent({
    template: `
        <div class="parent" style="border: 1px solid red">
            I am parent
            <button on-click="addChild">
                add child
            </button>
            {{childMsg}}
        </div>`,

    addChild() {

        const childs = this.data.get('childs');
        const parentEl = this.el;

        childs.forEach(child => {

            let childIns = new Child({
                parent: this,
                data: child
            });

            childIns.attach(parentEl);
            this.children.push(childIns);

        });
    },

    messages: {
        'child-msg': function(arg) {
            this.data.set('childMsg', arg.value);
        }
    }
});

const parent = new Parent({
    data: {
        childs: [{
            name: 'I am child1',
            msg: 'child1 send msg'
        }, {
            name: 'I am child2',
            msg: 'child2 send msg'
        }]
    }
});

parent.attach(document.body);

实例

See the Pen QMMZPV by zhanfang (@zhanfang) on CodePen.

© 2021 Baidu EFE