目录
- 复用组件时,把功能组件抽离出去后,会有父组件往功能组件传数据的需求,最常用的是父传子 props 和插槽 slot
- 如果传递的数据比较简单,比如只有文字,那么使用父传子即可
- 如果传递的数据比较复杂,有图片等,那么用插槽比较合适
父传子
子组件/功能组件
<div class="home-panel">
<div class="container">
<div class="head">
<h3>{{title}}<small>{{subTitle}}</small></h3>
<el-cascader :options="options" :show-all-levels="false"></el-cascader>
</div>
</div>
</div>
<swiper-slide
v-for="item in modelList"
:key="item.boothId"
@click.native="clickModel(item.boothId)"
>
......
export default {
data() {
return {
options :[]
};
},
// 接收父组件传过来的值
props: {
title: {
// type是指接收到的数据类型
type: String,
default: ''
},
subTitle: {
type: String,
default: ''
},
modelList: {
type: Array,
//接收类型,如果是数组则要这样写
default: () => []
}
},
// 可以在created中查看数据
created() {
console.log(this.data)
// 可以将获取到的数据列表复制到data中的options中使用,也可以直接使用
this.options = this.data
}
}
父组件
<!-- 给子组件传值 -->
<Banner :bannerData ="modelList" ></Banner>
.......
// 引入子组件
import HomePannel from './components/home-pannel.vue'
// 注册子组件
export default {
components: {
Banner
},
data() {
return {
// 首页轮播图
modelList: [
{
companyMsg: {
imageUrl: require('@/assets/img/banner默认.png')
},
imgUrl: require('@/assets/img/banner默认.png')
}
],
}
}
}
子传父
子用 this.$emit() 传值
getDuration(res) {
this.videoTime = formatDuraton(Math.floor(s))
this.$emit("videoTime",this.videoTime)
},
父在子标签用@接值
<UploadImgPop @videoTime = "videoTimefn" ref="uploadImgPop">
。。。
methods: {
// 获取子传值
videoTimefn(res){
this.videoTimeData = res
console.log(this.videoTimeData)
},
}
具名插槽
子组件/功能组件
<div class="home-panel">
<div class="container">
<div class="head">
<!-- 右侧内容区域 -->
<slot name="right"/>
</div>
<!-- 主体内容区域 -->
<slot name="main"/>
</div>
</div>
父组件
<home-pannel title="新鲜好物" sub-title="新鲜出炉">
<!-- 注意插槽要写在使用的功能组件标签内 -->
<!--#后面是具名插槽的名字-->
<template #right>
<span>右侧内容</span>
</template>
<template #main>
<ul>
<li>图片1</li>
<li>图片2</li>
</ul>
</template>
</home-pannel>
......
// 导入子组件
import HomePannel from './components/home-pannel.vue'
export default {
// 注册子组件
components: {
HomePannel
}
}
子组件接收数据时的格式
props: {
Str: {
type: String,
default: ''
},
Num: {
type: Number,
default: 0
},
Bool: {
type: Boolean,
default: true
},
Arr: {
type: Array,
default: () => []
},
Obj: {
type: Object,
default: () => ({})
},
Function: {
type: Function,
default: function () { }
},
manualId: {
type: [Number, String],
default: ''
}
}
对象原始格式
Object: {
type: Object,
default: function () {
return {}
}
}
父组件调用子组件的方法
1、在子组件的html解构中用 ref=“随便名称” 来定义方法
2、在任意地方都可以调用,格式为:
this.$refs.任意名称.子组件中的方法名()
<!-- 子组件 -->
<knowledge-data-analysis ref="knowledgeDataAnalysis"></knowledge-data-analysis>
。。。
import KnowledgeDataAnalysis from './components/knowledgeDataAnalysis'
export default {
components: {
KnowledgeDataAnalysis
},
methods: {
this.$refs.knowledgeDataAnalysis.queryManualCntByKnowledgeFn({
// 这里是调用方法时给方法传的值
knowledgeId: this.value,
beginDate: this.formatDateValue(new Date(this.time[0])),
endDate: this.formatDateValue(new Date(this.time[1]))
})
}
}