Javascript Vue:子字符串属性不会渲染

嗨，我是vue的新手，我正在尝试了解它的单向数据绑定模型组件注册和传递道具

在我的

index.js

中，我有一个父组件，我现在想在其中渲染一个子组件

import Vue from 'vue'
import StyledTitle from './components/StyledTitle'

new Vue({
  el: '#app',
  components: {
    StyledTitle,
  },
})

子组件是

StyledTitle.js

import Vue from 'vue'
import styled from 'vue-styled-components'

const StyledTitle = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #ff4947;
  &:hover,
  &:focus {
    color: #f07079;
  }
`

Vue.component('styled-title', {
  props: ['text'],
  components: {
    'styled-title': StyledTitle,
  },
  template: `<StyledTitle>{{ text }}</StyledTitle>`,
})

export default StyledTitle

从“Vue”导入Vue
从“vue样式化组件”导入样式化
const StyledTitle=styled.h1`
字号：1.5em；
文本对齐：居中；
颜色：#ff4947；
&：悬停，
&：焦点{
颜色：#f07079；
}
`
Vue.component（'styled-title'{
道具：['text']，
组成部分：{
“样式标题”：样式标题，
},
模板：{{text}}`，
})
导出默认样式标题

最后，我的HTML是我希望呈现红色Hi的HTML

<div id="app">
   <styled-title text="Hi"></styled-title>
</div>

但HI未显示，且道具值未定义。从react来到这里，非常想知道为什么这不起作用，谢谢

Ps我的vue开发工具的屏幕截图

---

问题在于，您的

StyledTitle.js

文件导出一个普通样式的

组件，该组件使用默认插槽作为其内容，而不是接受

文本的自定义组件

如果您仍然热衷于使用基于道具的组件，则需要将其导出，而不是从
vue样式的组件中导出。在这种情况下，您也应该避免全局组件注册

比如说

//StyledTitle.js
从“vue样式化组件”导入样式化
//在本地创建样式化的标题
const Title=styled.h1`
字号：1.5em；
文本对齐：居中；
颜色：#ff4947；
&：悬停，
&：焦点{
颜色：#f07079；
}
`
//现在导出自定义包装器组件
导出默认值{
名称：'StyledTitle'，
道具：['text']，
组成部分：{
Title，//在本地将样式化的标题注册为“Title”
},
模板：{{text}}`，
})


如果您的组件不保持任何状态，您可以使其保持状态。使用渲染功能也会有所帮助，尤其是在Vue运行时不包含模板编译器（这是大多数Vue CLI应用的默认设置）的情况下

导出默认值{
名称：'StyledTitle'，
功能性：对，
道具：{text:String}，
render：（h，{props}）=>h（标题，props.text）
}
问题在于，您的
StyledTitle.js
文件导出一个普通样式的
组件，该组件使用默认插槽作为其内容，而不是接受
文本的自定义组件

如果您仍然热衷于使用基于道具的组件，则需要将其导出，而不是从
vue样式的组件中导出。在这种情况下，您也应该避免全局组件注册

比如说

//StyledTitle.js
从“vue样式化组件”导入样式化
//在本地创建样式化的标题
const Title=styled.h1`
字号：1.5em；
文本对齐：居中；
颜色：#ff4947；
&：悬停，
&：焦点{
颜色：#f07079；
}
`
//现在导出自定义包装器组件
导出默认值{
名称：'StyledTitle'，
道具：['text']，
组成部分：{
Title，//在本地将样式化的标题注册为“Title”
},
模板：{{text}}`，
})


如果您的组件不保持任何状态，您可以使其保持状态。使用渲染功能也会有所帮助，尤其是在Vue运行时不包含模板编译器（这是大多数Vue CLI应用的默认设置）的情况下

导出默认值{
名称：'StyledTitle'，
功能性：对，
道具：{text:String}，
render：（h，{props}）=>h（标题，props.text）
}
@MarkMeyer控制台中没有与应用程序相关的错误。不过，我会添加我的vue开发工具的屏幕截图。const StyledTitle=styled.h1``是声明样式化组件的方式。是否有理由希望将
文本作为道具传递，而不是将其设置在默认插槽中？@Phil component def如果我只是在开始标记和结束标记之间传递Hi，那么它会起作用，但我希望道具能够在将来的情况下发挥作用，在这种情况下，我可能会有更多的动态特性内容不仅仅是来自API或其他数据的“Hi”object@MarkMeyer控制台中没有与应用程序相关的错误。不过，我会添加我的vue开发工具的屏幕截图。const StyledTitle=styled.h1``是声明样式化组件的方式。是否有理由希望将
文本作为道具传递，而不是将其设置在默认插槽中？@Phil component def如果我只是在开始标记和结束标记之间传递Hi，那么它会起作用，但我希望道具能够在将来的情况下发挥作用，在这种情况下，我可能会有更多的动态特性除了来自API或其他数据对象的“Hi”之外的内容非常感谢这项工作，Vue的文档中是否有您知道的概述此模式的内容？我不太明白文档中的道具是什么。@gwar9我不太清楚你说的“此模式”是什么意思。我想这是一个vue样式的组件，而不是一个vue组件。根据模式，我想知道如何导出默认对象，您可以在其中设置组件名称、道具、要使用的组件及其模板，而不是像我尝试的那样使用Vue.component。使用
Vue.component（）
。在我的回答中，您和我得到的是一个在
StyledTitle.js
中创建和导出的组件，该组件可以通过导入并在其他组件中使用。组件只是具有属性的对象，如
道具
、
模板
、
组件
，等等。
名称
属性并不特别重要，只是真正用于调试。非常感谢您这么做，Vue在文档中是否有概述此模式的内容？我不太明白文档中的道具是什么。@gwar9我不太清楚你说的“此模式”是什么意思。我想这是一个vue样式的组件，而不是一个vue组件。根据模式，我想知道导出默认对象，您可以在其中设置组件名称、道具、要使用的组件及其属性