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>

  <div class="parent">

    <v-button @childEvent='parentMethod' />

  </div>

</template>

<script>

  import VButton from './v-button'

  export default {

    data () {

      return {

        title: '父子组件通信'

      }

    },

    methods: {

      parentMethod (msg) { 

        console.log(msg) // 有没有收到来自子组件的礼物

      }

    },

    components: {

      VButton

    }

  }

</script>

子组件：v-button.vue

<template>

  <div class="next" @click='next'>

   下一步

  </div>

</template>

<script>

export default {

  methods: {

    next () {

      this.$emit('childEvent', '我是给父组件的礼物')

    }

  }

}

</script>

或者用vuex，时间不早了，已是凌晨1点，我还有好几个邀请！vuex请参考我github的一个基于 vue2 + vuex + mint-ui的项目吧！不懂得私信我或者评论都可以！

基于 vue2 + vuex + mint-ui 构建一个单页面应用