Javascript 从vue.js中的另一个组件调用组件

我有一个类似于本视频的警报组件：还有另一个组件（书）。创建书籍时，如何调用成功回调函数中的警报组件，如下所示：

<alert>A book was created successfully !!!</alert>

// resources/assets/js/components/Book.vue
<template>
    .....
    <alert>A book was created successfully !!!</alert>

    //Create book form
    ....
</template>

<script>
    export default {
        methods: {
            submit: function () {
                    this.$http.post('/api/books/add', {
                    data: this.data,
                }).then(function (response) {
                     this.$refs.alert
                }, function (response) {
                });
    }
</script>

更新2: 警报组件

<template>
    <div class="Alert Alert--{{ type | capitalize }}"
         v-show="show"
         transition="fade"
    >
        <slot></slot>

        <span class="Alert__close"
              v-show="important"
              @click="show = false"
        >
            x
        </span>
    </div>
</template>

<script>

    export default {
        props: {
            type: { default: 'info' },
            timeout: { default: 3000 },
            important: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {show: true};
        },

        ready() {
            if (!this.important)
            {
                setTimeout(
                    () => this.show = false,
                        this.timeout
                    )
            }

        }
    }

</script>

<style>
    .Alert {
        padding: 10px;
        position: relative;
    }

    .Alert__close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .Alert--Info {
        background: #e3e3e3;
    }

    .fade-transition {
        transition: opacity 1s ease;
    }

    .fade-leave {
        opacity: 0;
    }
</style>

x
导出默认值{
道具：{
类型：{default:'info'}，
超时：{默认值：3000}，
重要：{
类型：布尔型，
默认值：false
}
},
数据（）{
返回{show:true}；
},
就绪（）{
如果（！this.important）
{
设置超时(
（）=>this.show=false，
这是超时
)
}
}
}
.警惕{
填充：10px；
位置：相对位置；
}
.警报关闭{
位置：绝对位置；
顶部：10px；
右：10px；
光标：指针；
}
.警报--信息{
背景：#e3；
}
.渐变过渡{
过渡：不透明度1s；
}
.淡出{
不透明度：0；
}

在Book.vue中，我想这样做：

<alert>A book was created successfully !!!</alert>

// resources/assets/js/components/Book.vue
<template>
    .....
    <alert>A book was created successfully !!!</alert>

    //Create book form
    ....
</template>

<script>
    export default {
        methods: {
            submit: function () {
                    this.$http.post('/api/books/add', {
                    data: this.data,
                }).then(function (response) {
                     this.$refs.alert
                }, function (response) {
                });
    }
</script>

//resources/assets/js/components/Book.vue
.....
已成功创建一本书！！！
//创建图书表单
....
导出默认值{
方法：{
提交：函数（）{
这是.$http.post（'/api/books/add'{
数据：这个数据，
}).然后（功能（响应）{
此.$refs.alert
}，功能（回应）{
});
}

添加数据属性

alertShow: false

接下来，在回调中：

this.alertshow = true;

如果要删除它，请将其设置为false

在组件中添加一个指令：

v-show="alertshow"

更新：

向块组件添加组件属性

components: {Alert},

接下来，在组件外部，导入警报组件文件：

import Alert from './directory/Alert.vue'

如果您使用的是vueify，则会出现上述情况。否则，请使用添加组件

Vue.component

查看文档

更新2：

您的代码及其更改：

<script>
import Alert from './directory/alert.vue';
export default {

    components: {
        Alert
    },

    methods: {
        submit: function () {
                this.$http.post('/api/books/add', {
                data: this.data,
            }).then(function (response) {
                 this.$refs.alert
            }, function (response) {
            });
}

从“./directory/Alert.vue”导入警报；
导出默认值{
组成部分：{
警觉的
},
方法：{
提交：函数（）{
这是.$http.post（'/api/books/add'{
数据：这个数据，
}).然后（功能（响应）{
此.$refs.alert
}，功能（回应）{
});
}

---

此JSFIDLE可满足您的需求：

我使用按下按钮而不是服务器响应来触发警报，并更改了一些方法名称，但原理是一样的

警报组件嵌套在按钮组件内。按钮通过设置同步修改器将showalert道具传递给警报组件

---

一本书已成功保存

是否需要添加一些代码…我可以告诉您，有多种方法可以做到这一点。您的解决方案将取决于您的代码。无论您拥有什么…都可以工作。那么，我如何在book组件中调用警报组件？我正在使用veuify，并且已经在main.js中导入警报。但是我无法在book.vue中调用警报。这是错误的st显示文本：成功创建了一本书！！！你的警报组件是什么样子的？发布代码。因此，在你的书组件中，你需要添加一个组件属性，然后在脚本标记中导入警报组件文件。你能给我演示一个在另一个组件中调用组件的示例吗？我是使用vue.js的新手。谢谢你的帮助你的帮助。