slot插槽
【slot -- 具名插槽】
什么叫具名插槽?
就是有名字的插槽
为什么要用插槽?
因为一个组件里可能有多个地方都不想写死
那就使用具名插槽
命名语法:
<slot name="名字">默认值</slot>
使用语法:(依赖template包裹,并且用v-slot指定插槽名字)
<template v-slot:插槽名>
要传递的内容
</template>>
简写语法:(把v-slot变成#)
<template #插槽名>
要传递的内容
</template>
props
props里声明向父组件要的数据 得到数据后通过插值语法渲染到页面上
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
也就是
props
是子组件访问父组件数据的唯一接口。详细一点解释就是:
一个组件可以直接在模板里面渲染data里面的数据(双大括号)。
子组件不能直接在模板里面渲染父元素的数据。
如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。
StuProps.vue
<template>
<div class="props-container">
<h1>我叫{
{ name }}</h1>
<h2>我今年:{
{age}}</h2>
<h3>我是{
{gender}}</h3>
<h4>我喜欢的食物是:</h4>
<ul>
<li v-for="(item,index) in foods" :key="index">{
{item}}</li>
<!-- <li>西兰花</li>
<li>花菜</li>
<li>西红柿</li> -->
</ul>
</div>
</template>
<script>
export default {
name:'PropsCom',
props:["name","age","gender","foods"]
}
</script>
<style >
.props-container {
border: 1px solid orange;
width: 300px;
background-color: yellowgreen;
padding: 10px;
}
h1,
h2,
h3,
h4 {
margin: 0;
}
</style>