Vuejs 使用Props 传值实例

###问题提出
往往我们在开发的过程中, 需要在另一个组件控制子组件的变量,那么,这时候,使用子组件的props来传值就可以很好地解决这个问题;

###需求
假如我们需要将弹窗做成一个组件公用,那么在父组件或者另一个组件中,需要控制弹窗的显示与否,那么我们就需要将变量交给父组件来控制。

子组件的写法如下:



<template>
    <transition name="modal" title="支付">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">           
            <div class="modal-header "> 
               <i class="headerImg"></i>      
              <span class="c999 payInfo">弹窗</span>
            </div>
            <div class="modal-body">
              <Row>
                  <Row type="flex" align="middle" justify="center" >
                      <Col span="12" class="tc">  <img :src="imageSrc" alt="支付" class="qrCode"></Col>
                      <Col span="12" class="tc"> <img :src="imageSrc" alt="支付" class="qrCode"> </Col>               
                  </Row>
              </Row>
              <Row type="flex" align="middle" justify="center">
                  <Col span="12" class="payTxt tc">{{wxPay}} </Col>
                  <Col span="12"  class="payTxt tc"> {{zfbPay}} </Col>
              </Row>
            </div>

            <div class="modal-footer">
              <slot name="footer">
              </slot>
            </div>
          </div>
        </div>
      </div>

    </transition>  
</template>
<script>

export default {
    props:{imageSrc: String, 'payModalShow':Boolean},//声明类型，null为任意类型
    data() {
        return {
          wxPay: "微信支付",
          zfbPay: "支付宝支付",
          price: 10
        }
    },
   
}
</script>

弹窗组件将自身的变量imageSrc, payModalShow 通过props传递给父组件，那么父组件怎么接收呢？
父组件代码：


<template>
<modal payModalShow="false" v-if="payModalShow"   imageSrc="./src/assets/imgs/QRcode.png">   </modal>
</template>
<script>
import modal from "../../components/payModal";
export default {
  components: { modal },
}
</script>

上面只列出核心代码，可以看到，在通过import 引进子组件之后，为它注册组件，然后通过 modal（引入名称）在界面上显示；

而通过子组件props 传递的变量，则直接通过直接赋值方式初始化：

<modal payModalShow="false" v-if="payModalShow"   imageSrc="./src/assets/imgs/QRcode.png">

大家如果有疑问，欢迎在我的github上发Issue。
github.com/LwjCoder

代码我会上传至github上，地址： https://github.com/LWJcoder/VueJsLearning，欢迎start。

Vuejs 使用Props 传值实例

猜你喜欢