Vuejs 使用Props 传值实例
问题提出往往我们在开发的过程中, 需要在另一个组件控制子组件的变量,那么,这时候,使用子组件的props来传值就可以很好地解决这个问题;需求假如我们需要将弹窗做成一个组件公用,那么在父组件或者另一个组件中,需要控制弹窗的显示与否,那么我们就需要将变量交给父组件来控制。子组件的写法如下:style>.modal-mask {position: fixe
·
###问题提出
往往我们在开发的过程中, 需要在另一个组件控制子组件的变量,那么,这时候,使用子组件的props来传值就可以很好地解决这个问题;
###需求
假如我们需要将弹窗做成一个组件公用,那么在父组件或者另一个组件中,需要控制弹窗的显示与否,那么我们就需要将变量交给父组件来控制。
子组件的写法如下:
(model.vue)
<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" >
// 通过props 传递的变量,则直接通过直接赋值方式初始化:
<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传递给子组件,那么子组件怎么接收呢?
父组件代码:
(index.vue)
<template>
//传的值, 写在这里: payModalShow + imageSrc 两个参数 ;
<modal payModalShow="false" v-if="payModalShow" imageSrc="./src/assets/imgs/QRcode.png"> </modal>
</template>
<script>
//引入model弹窗组件
import modal from "../../components/payModal";
export default {
//声明组件
components: { modal },
data (){
payModalShow: true,
}
}
</script>
上面只列出核心代码, 可以看到,在通过import 引进子组件之后, 为它注册组件,然后通过 modal(引入名称) 在界面上显示;
大家如果有疑问,欢迎在我的github上发Issue。
github.com/LwjCoder
代码我会上传至github上,地址: https://github.com/LWJcoder/VueJsLearning,欢迎start。
更多推荐
已为社区贡献2条内容
所有评论(0)