vue 子组件控制父组件的值

Question

各位，遇到个问题，父组件中有个元素，想再子组件中控制显示与隐藏

父组件：

index.vue

<template>

    <div class="pt-all">

        <div class="login-header-logo p-f" v-show="showLogo"></div>

        <transition name="fade">

            <keep-alive>

                <router-view></router-view>

            </keep-alive>

        </transition>

    </div>

</template>

<script>

export default {

  // to do

  data(){

      return{

          showLogo:false

      }

  }

}

子组件：

<template>

 // ...

</template>

<script>

import $ from 'jquery'

import {api} from '../../commonjs/api'

export default {

    components:{

    },

    props:{

        showLogo:true

    },

    mounted(){

        this.showLogo = true;

    },

    data(){

        return{

            wrongTip:false

        }

    }

}    

类似这种，能否在login.vue中控制index.vue的值？新手，各位大神勿喷！?

Answer 1

模拟父子组件通信，通过点击子组件下一步按钮触发next方法，然后通过this.$emit('childEvent', '我是给父组件的礼物')触发父类的parentMethod方法。这是父组件：parent.vue：<template>&nbsp; <div class="parent">&nbsp; &nbsp; <v-button @childEvent='parentMethod' />&nbsp; </div></template><script>&nbsp; import VButton from './v-button'&nbsp; export default {&nbsp; &nbsp; data () {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; title: '父子组件通信'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; parentMethod (msg) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; console.log(msg) // 有没有收到来自子组件的礼物&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; components: {&nbsp; &nbsp; &nbsp; VButton&nbsp; &nbsp; }&nbsp; }</script>子组件：v-button.vue<template>&nbsp; <div class="next" @click='next'>&nbsp; &nbsp;下一步&nbsp; </div></template><script>export default {&nbsp; methods: {&nbsp; &nbsp; next () {&nbsp; &nbsp; &nbsp; this.$emit('childEvent', '我是给父组件的礼物')&nbsp; &nbsp; }&nbsp; }}</script>或者用vuex，时间不早了，已是凌晨1点，我还有好几个邀请！vuex请参考我github的一个基于 vue2 + vuex + mint-ui的项目吧！不懂得私信我或者评论都可以！基于 vue2 + vuex + mint-ui 构建一个单页面应用