vue 子組件控制父組件的值

各位，遇到個(gè)問(wèn)題，父組件中有個(gè)元素，想再子組件中控制顯示與隱藏
父組件：
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
        }
    }
}

類(lèi)似這種，能否在login.vue中控制index.vue的值？新手，各位大神勿噴！?

回答

編輯回答

別傷我

父子組件通信
子組件：

this.$emit('childEvent',args)

父組件：

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

另外：不建議使用JQ

不對(duì)啊，你這是父子組件嗎？這是路由跳轉(zhuǎn)吧？
建議全部用vuex算了。

A組件提交commit修改某一個(gè)狀態(tài)，B組件去computed這個(gè)狀態(tài)，再watch，任意級(jí)別的通信都可以搞定。

2017年9月19日 21:44

編輯回答

命于你

單項(xiàng)數(shù)據(jù)流，不建議子組件改變父組件的值

2017年4月13日 13:03

編輯回答

老梗

子組件 this.$emit(childMethods,'aaaaa') //aaa舉例子你可以傳某個(gè)值

然后父組件 @childMethods = "你要執(zhí)行的方法" // 然后就可以觸發(fā)事件來(lái)改變

2017年12月17日 07:58

編輯回答

凝雅

感覺(jué)這種問(wèn)題自己好好地看一遍官方文檔就好了

2017年11月6日 20:09

編輯回答

蝶戀花

方法一：$emit出去，父組件捕捉這個(gè)事件，修改顯示或隱藏。
方法二：vue是單向數(shù)據(jù)流，所以原則上禁止子組件修改父組件屬性，但實(shí)際上也是可以實(shí)現(xiàn)的，使用.sync就可以做到，詳細(xì)請(qǐng)看 https://cn.vuejs.org/v2/guide...

2018年6月24日 01:46

編輯回答

忠妾

看起來(lái)你要找的的：vuex

如果只是單純的想做控制，也可以嘗試下Bus

2017年8月6日 06:43

編輯回答

安若晴

謝邀！
模擬父子組件通信，通過(guò)點(diǎn)擊子組件下一步按鈕觸發(fā)next方法，然后通過(guò)this.$emit('childEvent', '我是給父組件的禮物')觸發(fā)父類(lèi)的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) // 有沒(méi)有收到來(lái)自子組件的禮物
      }
    },
    components: {
      VButton
    }
  }
</script>

子組件：v-button.vue

<template>
  <div class="next" @click='next'>
   下一步
  </div>
</template>

<script>
export default {
  methods: {
    next () {
      this.$emit('childEvent', '我是給父組件的禮物')
    }
  }
}
</script>

或者用vuex，時(shí)間不早了，已是凌晨1點(diǎn)，我還有好幾個(gè)邀請(qǐng)！vuex請(qǐng)參考我github的一個(gè)基于 vue2 + vuex + mint-ui的項(xiàng)目吧！不懂得私信我或者評(píng)論都可以！
基于 vue2 + vuex + mint-ui 構(gòu)建一個(gè)單頁(yè)面應(yīng)用

2018年5月9日 04:09