3.2 选择视频
3.2.1 Vue父子组件通信
上一章已实现了我的媒资页面,所以媒资查询窗口页面不需要再开发,将“我的媒资页面”作为一个组件在修改课程
计划页面中引用,如下图:
修改课程计划页面为父组件,我的媒资查询页面为子组件。
问题1:
我的媒资页面在选择媒资文件时不允许显示,比如“视频处理”按钮,该如何控制?
这时就需要父组件(修改课程计划页面)向子组件(我的媒资页面)传入一个变量,使用此变量来控制当前是否进
入选择媒资文件业务,从而控制哪些元素不显示,如下图:
问题2:
在我的媒资页面选择了媒资文件,如何将选择的媒资文件信息传到父组件?
这时就需要子组件调用父组件的方法来解决此问题,如下图:
启动mysql
分析
点击选择视频,让弹框显示
默认关闭
当添加这句话 props: [‘ischoose’], 就可以将父页面里的ischoose这个值传输到子页面。所以当点击选择视频时,就会在子页面的列表里全部显示选择,当点击选择后,就会变为ischoose=false,“开始处理”按钮。
调用父组件的choosemedia方法
3.2.2 父组件(修改课程计划)
本节实现功能:在课程计划页面打开我的媒资页面。
1、引入子组件
import mediaList from '@/module/media/page/media_list.vue';
export default {
components:{
mediaList
},
data() {
....
2、使用子组件
在父组件的视图中使用子组件,同时传入变量ischoose,并指定父组件的方法名为choosemedia
这里使用el-dialog 实现弹出窗口。
<el‐dialog title="选择媒资文件" :visible.sync="mediaFormVisible">
<media‐list v‐bind:ischoose="true" @choosemedia="choosemedia"></media‐list>
</el‐dialog>
3、choosemedia方法
在父组件中定义choosemedia方法,接收子组件调用,参数包括:媒资文件id、媒资文件的原始名称、媒资文件
url
choosemedia(mediaId,fileOriginalName,mediaUrl){
}
4、打开子组件窗口
1)打开子组件窗口按钮定义
添加“选择视频”按钮:
<el‐button style="font‐size: 12px;" type="text" on‐click={ () => this.querymedia(data.id) }>选择
视频</el‐button>
效果如下:
2、打开子组件窗口方法
定义querymedia方法:
methods: {
//打开查询媒资文件窗口,传入课程计划id
querymedia(teachplanId){
this.activeTeachplanId = teachplanId;
this.mediaFormVisible = true;
},