如何使用vue-js-modal将数据传回父组件

Question

https://github.com/euvl/vue-js-modal#readme

我已经搜索了所有文档，但找不到一个符合我需要的示例。我还搜索了堆栈溢出，但没有找到与我的匹配的示例。

我在这里严格地询问父组件和模态组件之间的交互。您可以假定我的所有导入都是正确的。为简洁起见，我省略了一些代码(例如，模板在组件A上是多余的)。您可以假设open是通过click处理程序触发的。

我有一个组件:a

{
    data() {
        return {
            data: ''
        }
    },
    methods: {
        open() {
            this.$modal.show(ComponentB, { data: this.data }, {}, { 'before-close': update })
        },
        update(e) {
            // e = event
            // this.data is not changed
        }
    }
}

组件B

<template>
    <div>
        <input v-model="$attrs.data" />
        <button @click="$emit('close')">close</button>
    </div>
</tempate>

正如您所看到的，Component A通过vue-js- ComponentB将其数据属性传递给模式，而输入又通过v-model绑定回该属性。

为什么当我更改此属性时，父零部件上的此属性不会更改。

通过模态组件传递数据和备份数据的正确方式是什么？

还有。我的要求是在这种风格中使用动态模态。不要在JSX中使用模板语法。

Answer 1

我通过向Modal传递一个函数来解决这个问题，这可能不是最好的做法，但它是有效的。

{
    data() {
        return {
            data: ''
        }
    },
    methods: {
        open() {
            this.$modal.show(ComponentB, { update: this.update }, {}, {})
        },
        update(data) {
            this.data = data
        }
    }
}

组件B

<template>
    <div>
        <input v-model="data" @change="update" />
        <button @click="$emit('close')">close</button>
    </div>
</tempate>

export default {
    data() {
        {
            data: ''
        }
    },
    methods: {
        update() {
            this.$attrs.update(this.data)
        }
    }
}