亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue 子組件控制父組件的值

vue 子組件控制父組件的值

茅侃侃 2019-02-27 17:21:15
各位,遇到個問題,父組件中有個元素,想再子組件中控制顯示與隱藏父組件: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的值?新手,各位大神勿噴!?
查看完整描述

1 回答

?
白板的微信

TA貢獻1883條經驗 獲得超3個贊

模擬父子組件通信,通過點擊子組件下一步按鈕觸發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 構建一個單頁面應用


查看完整回答
反對 回復 2019-03-04
  • 1 回答
  • 0 關注
  • 668 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號