Vuejs2 如何从单个文件组件获取数据，以便在我的应用程序中以不同方式显示

我是vuejs的新手，所以请容忍我

我制作了一个简单的组件，在其中我将数据从应用程序传递给它，但我希望在整个应用程序中重用该组件时能够使用HTML。我简化了所有内容以使事情更简单，以下是我的.vue文件：

<template>
  <div>
    <slot :data="data">This is a placeholder ({{data}})</slot>
  </div>
</template>

<script>
export default {
  name: 'test',
  props: {
    data: {}
  }
}
</script>

这是一个占位符（{data}}）
导出默认值{
名称：'测试'，
道具：{
数据：{}
}
}

在我的php文件中，我输入了以下内容：

<test :data = "'testData'">
    <template slot-scope="prop">    
        {{ prop.data }}
    </template>
</test>

{{prop.data}}

问题是，当它呈现时，它只在我的页面上显示{{prop.data}}，如果我删除{{prop.data}，它呈现：这是一个占位符（testData）

---

我做错了什么！或者，如果不创建另一个使用我创建的可重用组件的.vue文件，就无法执行我正在执行的操作吗？

将

{{prop.data}}

放在

<template slot-scope="prop">{{ prop.data }}</template>

{{prop.data}

---

Vue将

test.Vue

文件中的插槽替换为

{prop.data}

，当您从模板中删除

{prop.data}

时，您说的是呈现插槽内容，它是

这是一个占位符（{data}）

，但我的预期结果应该是：当我包含{prop data}testData}但是我得到的是：{{prop.data}}，看起来Vue没有发现它是一个需要渲染的变量，我只是尝试了你的代码，得到了正确的输出，即testData。下面是您可以比较的链接。可能是代码中的输入错误，请重新检查，但您的模板代码位于.vue文件中，正如我在php文件中的模板代码一样。这有关系吗？因此，

{{prop.data}}

是在我的php代码中呈现html的，这样我就可以向其中传递一个php变量。如果使用该代码，我会假设我必须创建另一个扩展基本组件的组件，以更改部件在插槽中的外观。