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 构建一个单页面应用

Answer 2

父子组件通信
子组件：

this.$emit('childEvent',args)

父组件：

<child @childEvent="handlerChild"></child>
//...
methods:{
  //...
  handler(args){
    console,log(args);
    this.showlogo = !this.showlogo;
  }
}

另外：不建议使用JQ

---

不对啊，你这是父子组件吗？这是路由跳转吧？
建议全部用vuex算了。

A组件提交commit修改某一个状态，B组件去computed这个状态，再watch，任意级别的通信都可以搞定。

Answer 3

看起来你要找的的：vuex

如果只是单纯的想做控制，也可以尝试下Bus

Answer 4

感觉这种问题自己好好地看一遍官方文档就好了

Answer 5

单项数据流，不建议子组件改变父组件的值

Answer 6

方法一：$emit出去，父组件捕捉这个事件，修改显示或隐藏。
方法二：vue是单向数据流，所以原则上禁止子组件修改父组件属性，但实际上也是可以实现的，使用.sync就可以做到，详细请看 https://cn.vuejs.org/v2/guide...

Answer 7

子组件 this.$emit(childMethods,'aaaaa') //aaa举例子 你可以传某个值

然后父组件 @childMethods = "你要执行的方法" // 然后就可以触发事件来改变