子方法未定义 vue.js

Question

我在使用 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>

我错过了什么？ ????

Answer 1

如果您想从父级调用子方法，您可以通过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>

Answer 2

我不确定，但我假设子组件是模态的，如果是这样，则通过父组件打开，然后看看它有多简单：

父组件

<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>

子组件

<template>
    <div v-if="modal">
        <button @click="closeModal">Close</button>
    </div>
</template>
<script>
    export default {
        props: {
            modal: {
                default: false
            }
        },
        methods: {
            closeModal() {
                this.$emit('update:modal')
            }
        }
    }
</script>

.sync 修饰符会在你按下子组件时自动关闭 div（应该是模态的）然后自动，vue 会自动更新父组件中的模态属性。