黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day14（九） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-6-3 11:01
标题: 【郑州校区】Java的新项目学成在线笔记-day14（九）
3.2 选择视频
3.2.1 Vue父子组件通信
上一章已实现了我的媒资页面，所以媒资查询窗口页面不需要再开发，将“我的媒资页面”作为一个组件在修改课程 计划页面中引用，如下图：

修改课程计划页面为父组件，我的媒资查询页面为子组件。
  问题1：
我的媒资页面在选择媒资文件时不允许显示，比如“视频处理”按钮，该如何控制？
这时就需要父组件（修改课程计划页面）向子组件（我的媒资页面）传入一个变量，使用此变量来控制当前是否进 入选择媒资文件业务，从而控制哪些元素不显示，如下图：


问题2：
在我的媒资页面选择了媒资文件，如何将选择的媒资文件信息传到父组件？
这时就需要子组件调用父组件的方法来解决此问题，如下图：


3.2.2 父组件（修改课程计划）
本节实现功能：在课程计划页面打开我的媒资页面。
1、引入子组件

[AppleScript] 纯文本查看 复制代码

import mediaList from '@/module/media/page/media_list.vue';  

 export default {   

  components:{   

    mediaList  

   },   data() {   ....

2、使用子组件 在父组件的视图中使用子组件，同时传入变量ischoose，并指定父组件的方法名为choosemedia
这里使用el-dialog 实现弹出窗口。

[AppleScript] 纯文本查看 复制代码

<el‐dialog title="选择媒资文件" :visible.sync="mediaFormVisible"> 

  <media‐list v‐bind:ischoose="true" @choosemedia="choosemedia"></media‐list>

 </el‐dialog>

3、choosemedia方法
在父组件中定义choosemedia方法，接收子组件调用，参数包括：媒资文件id、媒资文件的原始名称、媒资文件 url

[AppleScript] 纯文本查看 复制代码

choosemedia(mediaId,fileOriginalName,mediaUrl){  

    }

4、打开子组件窗口 1）打开子组件窗口按钮定义

[AppleScript] 纯文本查看 复制代码

添加“选择视频”按钮： <el‐button style="font‐size: 12px;" type="text" on‐click={ () => this.querymedia(data.id) }>选择 视频</el‐button>

效果如下：

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2