我使用refs
这是我的父组件:
<template>
<div>
<div class="home-video-screen tw--mb-2" @click="onToggleModal">
<slot/>
</div>
<tw-modal ref="modal">
<iframe width="100%" height="400" :src="videoSrc" frameborder="0" allowfullscreen=""></iframe>
</tw-modal>
</div>
</template>
<script>
import TwModal from './TwModal'
export default {
props: {
videoId: { type: String, required: true },
placeholder: { type: String, required: true },
alt: { type: String }
},
components: { TwModal },
computed: {
videoSrc() {
const url = `https://www.youtube.com/embed/${this.videoId}`
return `${url}?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1`
}
},
methods: {
onToggleModal() {
this.$refs.modal.onToggle();
}
},
}
</script>
<style lang="scss" scoped>
.home-video-screen { cursor: pointer; }
</style>
这里的子组件:
<template>
<fade-transition>
<div v-if="modal" @click.self="onToggle" class="tw-fixed tw-z-50 tw-pin tw-overflow-auto tw-bg-smoke-darker tw-flex">
<div class="tw-fixed tw-shadow-inner tw-max-w-md md:tw-relative tw-pin-b tw-pin-x tw-align-top tw-m-auto tw-justify-end md:tw-justify-center tw-p-1 tw-bg-white tw-w-full md:tw-h-auto md:tw-shadow tw-flex tw-flex-col">
<div class="tw-flex tw-flex-col">
<span @click="onToggle" class="tw-text-right">
<svg class="tw-h-6 tw-w-6 tw-text-grey hover:tw-text-grey-darkest" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
<slot/>
</div>
</div>
</div>
</fade-transition>
</template>
<script>
import {FadeTransition} from 'vue2-transitions'
export default {
props: {
scrollable: {
type: Boolean,
default: false,
}
},
data() {
return {
modal: false,
}
},
components: { FadeTransition },
methods: {
onToggle () {
this.modal = !this.modal;
if (!this.scrollable && this.modal) {
document.body.classList.add('v--modal-block-scroll')
} else {
document.body.classList.remove('v--modal-block-scroll')
}
}
}
}
</script>
<style>
.v--modal-block-scroll {
overflow: hidden;
position: fixed;
width: 100vw;
}
</style>
我错过了什么?
答案 0 :(得分:0)
如果要从父级调用子方法,可以通过this.$children[index].methodName()
访问子方法。您的父模板可能不需要<slot>
标记,但应直接引用子组件。这是一个简单的例子:
<template>
<div>
<h1 @click="clicked()">parent</h1>
<child></child>
</div>
</template>
<script>
import Child from './child.vue'
export default {
components: {
child: Child
},
methods: {
clicked() {
this.$children[0].childToggle()
}
}
}
</script>
<template>
<div>
<h2>child</h2>
</div>
</template>
<script>
export default {
methods: {
childToggle() {
console.log('child toggle')
}
}
}
</script>
答案 1 :(得分:0)
我不确定但是我假设子组件是一个模态并且通过父组件打开,如果是这样,那么看看它是多么简单:
Parent Componet
iptables -V
子组件
<template>
<div>
<Child :modal.sync="modal" />
<button @click="modal = true"></button>
</div>
</template>
<script>
import Child from 'Child.vue'
export default {
components: {
Child
},
data() {
return {
modal: false
}
}
}
</script>
当您按下子组件以关闭div(应该是模态)时,.sync修饰符将自动自动生成,vue将更新父组件中的模态属性。