vuejs props v-model to with getdata

Question

我是一个vuejs新手，我想做的事情可能很简单，但对我来说似乎太复杂了。示例:我在"vue- search“输入中编写的内容在VueSearch组件中进行搜索，但它突然清空了输入。和“异步搜索(事件)”

我想将传入的数据发送到主组件。因为我将在那里发布，所以我将把它放在主组件的"getData:[]“部分中。

提前感谢您的帮助。

<template>
<vue-search v-model="nameText"/>
</template>
<script>
import VueSearch from "./components/tools/VueSearch";

export default {
    data() {
        return {
            nameText: '',
            getData:[]
        }
    },
    components: {
        VueSearch
    }
}
</script>

<template>
    <div>
        <input type="text" :value="value" @input="search"/>
        <p>{{ DoubleDATA }} </p>
    </div>
</template>

<script>
export default {
    name: "VueSearch",
    data() {
        return {
            DoubleDATA: ''
        }
    },
    props: {
        value: String
    },
    methods: {
        async search(event) {
            if (event.target.value !== '') {
                const res = await this.callApi('get', 'search' + '?filter=' + event.target.value)
                if (res.status === 200) {
                    this.DoubleDATA = res.data;
                }
            }
        }
    }

}
</script>

Answer 1

尝试使用$emit。有很多方法可以实现这一点，从像Vuex这样的状态管理框架，到您自己制作的小型、简单但有效的事件总线。

从子组件中，您可以将数据发送回父组件，如下所示：

// MyChildComponent.vue


<script>
    export default {
        methods: {
            sendToParent(data) {
                this.$emit('your-custom-event-name', data);
            }
        }
    };
</script>

然后，您可以在父级上侦听your-custom-event-name，并对其做出反应：

// MyParentComponent.vue


<template>
    <!-- $event is the data we are passing from the child component -->

    <my-child-component @your-custom-event-name="someMethod($event)"/>
</template>

<script>
    export default {
        methods: {
            someMethod(data) {
                // and here is your data from the child component!
                console.log(data)
            }
        }
    };
</script>

如果你只需要往上走一层到父进程，那么$emit是很棒的，但是如果你需要广播more...broadly...then，你可能会想要走事件总线或者Vuex路线。

这有意义吗？试一试，如果你有任何问题，请告诉我。