vuejs2 – VueJs:在另一个组件中使用组件

前端之家收集整理的这篇文章主要介绍了vuejs2 – VueJs:在另一个组件中使用组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图利用预定义属性在另一个内部使用主要组件.

这就是我想要实现的目标,但我只是得到了一个空div.

<template>
    <call-dialog-link
        :id="id"
        :url=url"
        message="Are you sure you wish to remove this record?"
        label="Remove"
        css-classes="alert"
    ></call-dialog-link>
</template>
<script>
    import CallDialogLink from './CallDialogLink.vue';
    export default {
        props: {
            id: {
                type: String,required: true
            },url: {
                type: String,required: true
            }
        },components: {
            'call-dialog-link': CallDialogLink
        }
    };
</script>

这是CallDialogLink组件

<template>
    <span class="clickAble" :class="cssClasses" v-text="label" @click="clicked()"></span>
</template>
<script>
    export default {
        props: {
            id: {
                type: String,message: {
                type: String,label: {
                type: String,cssClasses: {
                type: String,required: false
            }
        },mounted() {
            window.EventHandler.listen('remove-dialog-' + this.id + '-called',(data) => {
                window.location.reload(true);
            });
        },methods: {
            clicked() {
                window.EventHandler.fire('top-confirm',{
                    id: 'remove-dialog-' + this.id,message: this.message,url: this.url
                });
            }
        }
    };
</script>

知道我做错了什么吗?

解决方法

我相信你的代码中有拼写错误.
<template>
    <call-dialog-link
        :id="id"
        :url="url" // didn't open the double quote here
        message="Are you sure you wish to remove this record?"
        label="Remove"
        css-classes="alert"
    ></call-dialog-link>
</template>
原文链接:https://www.f2er.com/js/157692.html

猜你在找的JavaScript相关文章