VueJs：在另一个组件中使用组件

Posted 2023-02-23

【中文标题】VueJs：在另一个组件中使用组件

【英文标题】：VueJs: Using component inside another component

【发布时间】：2017-07-05 08:14:08

【问题描述】：

我正在尝试使用另一个具有预定义属性的主要组件。

这是我想要实现的目标，但结果却是一个空的 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,
                required: true
            ,
            url: 
                type: String,
                required: true
            ,
            message: 
                type: String,
                required: true
            ,
            label: 
                type: String,
                required: true
            ,
            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>

知道我做错了什么吗？

【问题讨论】：

message, label, css-classes 没有属性绑定？

它们只是静态道具，我从这个组件中传递给CallDialogLink。因为它们只是字符串，所以我不必使用动态绑定。

那么你没有做错任何事情，如果你收到了这些道具，你可以在<call-dialog-link>组件中控制台登录created钩子吗？

我做到了，但它看起来好像根本没有被调用 - 控制台中没有任何内容。

尝试将其封装在<div> 中？另外，能否请您发布<call-dialog-link>

的代码

【参考方案1】：

我相信您的代码中有错字。

<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>

【讨论】：

你是救生员！该死的错别字。非常感谢。

你不确定它是否有效，如果你知道你做的是对的，你会检查一下以确定，但你会随着时间的推移而克服它。