Javascript 无法在vuejs中传递/接收属性值

我正在创建第一个vuejs组件，如下所示：

// modal.vue
<template>
 <div id='my-modal'>

    <div class='modal'>
        {{ title }}
    </div>

 </div>
</template>

<script>

export default {
    template: '#my-modal',
    props: ['title'],

    created () {
        console.log('modal works')
    }
}

</script>

//modal.vue
{{title}}
导出默认值{
模板：“#我的模态”，
道具：['title']，
创建（）{
console.log（'modal works'）
}
}

目标是导入该文件并通过

标记调用if，并将标题传递给它。这是我导入上述模式的文件

// home.vue

<template>
    <div>
        <modal :title='title'></modal>
    </div>
</template>
<script> 
import modal from './modal'
export default {

    components: {modal},
    data () {
        return {
            title: "HELLO!!"
        }
    }
}

</script>

//home.vue
从“./modal”导入模态
导出默认值{
组件：{modal}，
数据（）{
返回{
标题：“你好！！”
}
}
}

但是，尽管传递了

，但在第一个示例中我无法显示标题

---

我做错了什么

看不出代码有任何错误。因此，我的猜测如下所示：

您已导入引导。 引导包含一个名为：

modals.less

它包含css代码，可将您的组件置于

显示：none

。 尝试将

modal.vue

的根div的类名更改为类似以下内容：

hidar

，然后返回报告

// Modals
// --------------------------------------------------

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and shit

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal;
  -webkit-overflow-scrolling: touch;
}

编辑1 项目中的任何其他css框架或文件都可能导致此类问题（我个人可以使用bootstrap复制）。 您必须执行的关键调试步骤如下：

打开Chrome开发工具。查找

看看它是否包含文本。它可能包含文本。我不 有没有理由不这样做

检查样式。查找

display:none

，或任何其他可能干扰显示文本的css样式

---

您正在为

modal.vue

组件指定

template

属性。不要这样做，

部分会自动用作模板。@thanksd-hmm？我知道根元素应该是单独存在的，所以我没有触及

如果您的意思是这个标签的子元素不应该有道具，那么我也尝试了

还是一样。不，我的意思是
模板：“#我的模态”
。把它拿走line@thanksd这样做了，仍然看不到
{{title}
顺便说一句：我正在尝试将其作为一个组件，比如
vue.component（'modal'，{}）
，因此如果我删除该行，就意味着我无法将js代码/props引用到模板，这是不正确的，
.vue
文件将使用
部分生成一个vue实例。您不需要在
部分中指定
模板
属性。此外，还应显示所有相关代码。如果删除
模板：“#我的模式”
行，您共享的代码将起作用。请阅读