提交 e286b6f9 编写于 作者: Z zhaoss

2.1.4小节习题、关键字添加(中阶第一章完成)

上级 45235c0a
{
"type": "code_options",
"author": null,
"author": "zhaoss",
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "7063431fb2d345128fe6cc7882428db7"
......
{
"type": "code_options",
"author": null,
"source": "exercises.md",
"notebook_enable": false,
"exercise_id": "a5ec63ab3fd842f782135b753b26486d"
}
\ No newline at end of file
# 插槽
<div style="color: pink;">几何小常识:</div>
<br>
下方的alert-box是一个组件,和 HTML 元素一样,我们经常需要向一个组件传递内容,像这样:
```javascript
<alert-box>
Something bad happened.
</alert-box>
```
可能会渲染出这样的东西:<br>
![在这里插入图片描述](https://img-blog.csdnimg.cn/7a782ff974ab4eee995d84c15b2a81f1.png)
幸好,Vue 自定义的 `<slot>` 元素让这变得非常简单:
```javascript
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
```
如你所见,我们只要在需要的地方加入插槽就行了——就这么简单!
<br>
<div style="color: pink;">心凉小测试:</div >
下列关于插槽描述错误的是?<br/><br/>
## 答案
Vue中使用插槽是为了解决解决组件美观问题。
## 选项
### A
插槽就是子组件中的提供给父组件使用的一个占位符
### B
父组件可以在插槽中添加 HTML、组件等填充信息。
### C
具名插槽通俗的讲其实就是给插槽取个名字。
{
"node_id": "vue-096f1049c7644db58c08c34f053a624f",
"keywords": [],
"keywords": [
"动态组件",
"异步组件"
],
"children": [],
"export": [
"exercises.json"
],
"keywords_must": [],
"keywords_must": [
"Vue",
"组件"
],
"keywords_forbid": []
}
\ No newline at end of file
{
"node_id": "vue-0b06fbe067ef4f6d9b569839f99879de",
"keywords": [],
"children": [],
"export": [],
"keywords_must": [],
"keywords_forbid": []
}
\ No newline at end of file
......@@ -403,18 +403,15 @@
{
"动态组件、异步组件": {
"node_id": "vue-096f1049c7644db58c08c34f053a624f",
"keywords": [],
"children": [],
"keywords_must": [],
"keywords_forbid": []
}
},
{
"组件的递归": {
"node_id": "vue-0b06fbe067ef4f6d9b569839f99879de",
"keywords": [],
"keywords": [
"动态组件",
"异步组件"
],
"children": [],
"keywords_must": [],
"keywords_must": [
"Vue",
"组件"
],
"keywords_forbid": []
}
}
......@@ -1171,6 +1168,15 @@
"keywords_must": [],
"keywords_forbid": []
}
},
{
"组件的递归": {
"node_id": "vue-0b06fbe067ef4f6d9b569839f99879de",
"keywords": [],
"children": [],
"keywords_must": [],
"keywords_forbid": []
}
}
],
"keywords_must": [],
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册