App.vue代码
<template>
<div id="app">
<StuPropsVue :name="name" :age="age" :gender="gender" :fonds="['刘某某',20,'男','土豆炖排骨']"></StuPropsVue>
</div>
</template>
<script>
//导入组件文件夹
import StuPropsVue from './StuProps.vue';
export default {
name: 'App',
components: {
StuPropsVue
},
data() {
return{
name:"刘某某",
age:20,
gender:"男",
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
实例:
1.普通slot插槽
在子组件内占坑,在父组件里填坑.
slot一般都是子组件定义了主体部分,父组件引入,然后父组件根据需求不同需要向里面添加不同的 内容
2.具名插槽
什么是具名卡槽?
具名插槽:具有名字的插槽
使用语法
1.子组件定义slot时,在标签上加上name='xxxapos;属性
2.父组件将想插入的部分最外部的div上加上slot="xxx"属性 子组件里面的slot标签不能少,不然父组件里面写的出不来出不来
适用语法
<template v-slot:插槽名>内容</template>或
<template#插槽名>内容</template>
props传参
定义父组件
1. 父组件想要向子组件传值时,需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件。
2. 这个自定义属性的属性值是用来存放父组件向子组件传递的数据。
定义子组件
子组件使用props属性接收父组件传递过来的值。
props:{
父组件自定义的属性:该值的类型,
required:true
}