父子组件 - 父组件触发子组件事件[可携带参数]

父组件
1.给自身(父组件)绑定事件 @click="showVuePopup(1)"
2.在引入的子组件中设置ref ref="child"

<template>
  <div class="container">
    <div class="card-right">
      <span @click="showVuePopup(1)">立即充值</span>
    </div>
    <immediately-recharge
      ref="child"
    >
</immediately-recharge>
  </div>
</template>

<script>
import ImmediatelyRecharge from './ImmediatelyRecharge' //
export default {
  name: 'Select1',
  data () {
    return {
      value: ''
    }
  },
  components: {
    ImmediatelyRecharge
  },
  methods: {
    showVuePopup: function (e) {
      this.$refs.child.showVuePopup(true) // showVuePopup 是子组件中定义的方法
      this.value = e
    }
  }
}
</script>

<style lang="stylus" scoped></style>

子组件
在子组件中,显得就很简单了,只需要定要好事件方法即可showVuePopup

<template>
  <div class="container">      
  </div>
</template>

<script>
export default {
  name: 'ImmediatelyRecharge',
  data () {
    return {
      show: false
    }
  },
  methods: {
    showVuePopup (flag) {
      this.show = flag
    }
  }
}
</script>

<style lang="stylus" scoped></style>
Last modification:April 25th, 2019 at 06:04 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment