vuejs如何在父组件中单击按钮调用子组件

Question

在父组件中包含子组件，我想在单击按钮时渲染（触发）子组件。这是我的代码

<script>
    import childComponenet'../../components/child-component.vue';

    export default {
        name:'parentComponenet',
        components:{
            childComponenet
        },
methods: {
            goToChild(tag){
              //go to child component
        }
</script>

Answer 1

你到底是什么意思？单击 parent 上的按钮时显示 child？还是re-render呢？

如果你想show/render它，你可以做类似

的事情

<template>
  <button @click="toggleShowChild">Show Child Component</button>
  <ChildComponent v-show="showChild"/>
</template>

<script>
    import childComponenet'../../components/child-component.vue';

    export default {
        name:'parentComponenet',
        components:{
            childComponenet
        },
        data () {
          return {
            showChild: false
          }
        },
        methods: {
            toggleShowChild() {
              this.showChild = !this.showChild
            },
            goToChild(tag){
              //go to child component
        }
  
</script>

这是更进一步，您可以使用按钮切换 child。如果你想让按钮只显示child，你可以只在按钮上做@click="showChild = true"，根本不写方法。您也可以使用 v-if 而不是 v-show 来做同样的事情。更多关于 difference between v-if and v-show.

Answer 2

使用 $emit 或 vuex 但如果它 child 并且父母使用 $emit

vuejs如何在父组件中单击按钮调用子组件

how to call child componenet on button click in parent componenet in vuejs

vue.js

vue-router

vue-component

vuejs2

vuetify.js