脚本宝典收集整理的这篇文章主要介绍了父子组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
/* eslint-disable vue/require-prop-types */
子组件
<template>
<a-modal
:visible="show"
width="780px"
destroyOnClose
:footer="null"
@cancel="handleCancel"
>
<video
ref="video"
controlslist="nodownload noremoteplayback"
controls
autoplay
loop
style="width: 100%; height: auto; display: block"
:src="datainfo"
></video>
</a-modal>
</template>
<script>
export default {
name: 'Lookvideo',
components: {},
data () {
return {
}
},
filters: {},
created () {},
computed: {},
// eslint-disable-next-line vue/require-prop-types
props: ['show', 'datainfo'],
methods: {
handleCancel (e) {
this.$emit('fatherMethod')
}
}
}
</script>
<style lang="less" scoped>
</style>
父组件
<template>
<lookvideo :show="visible" :datainfo="videoUrl" @fatherMethod="close"></lookvideo>
</template>
<script>
import lookvideo from '@/components/lookvideo.vue'
export default {
name: 'TaskList',
components: {
lookvideo
},
data () {
return {
visible:false,
videoUrl:''
}
},
filters: {},
created () {},
mounted () {
},
computed: {},
methods: {
lookVideo (text, record) {
if (record.video_url === '') {
// this.$message.warning('暂无视频可预览', 2)
return
}
this.visible = true
this.videoUrl = record.video_url
},
close () {
this.visible = false
this.videoUrl = ''
}
}
}
</script>
<style lang="less" scoped>
</style>
<style>
</style>
脚本宝典总结
以上是脚本宝典为你收集整理的父子组件全部内容，希望文章能够帮你解决父子组件所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。