{ { text }}
为什么我们需要作用域插槽
我们来看另一个例子,假设我们有一个ArticleHeader
组件,data
中包含了一些文章信息。
// ArticleHeader.vue
{ { info.title }}
我们细看一下 slot
内容,后备内容渲染了 info.title
。
在不更改默认后备内容的情况下,我们可以像这样轻松实现此组件。
// ParentComponent.vue
在浏览器中,会显示 title
。
虽然我们可以通过向槽中添加模板表达式来快速地更改槽中的内容,但如果我们想从子组件中渲染info.description
,会发生什么呢?
我们想像用下面的这种方式来做:
// Doesn’t work!
{ { info.description }}
但是,这样运行后会报错 :TypeError: Cannot read property ‘description’ of undefined
。
这是因为我们的父组件不知道这个info
对象是什么。
那么我们该如何解决呢?