//开始了
在项目中经常会用到vue子组件向父页面执行操作的情况，今天就写一个选择弹框组件对父页面的一些操作方法
1.在子组件中添加事件
<ul>
<li v-for="(item,index) in paydata" @click="paypick(index)"> <!-- 触发点击事件-->
<span></span>
{{item.name}}
</li>
</ul>
----------------------------------------分割线
data() {
return {
payindex:"",
}
},
methods: {
paypick:function (index) {
this.payindex=index
this.$emit('ifpayshow',this.payindex) //点击再后触发父页面自定义方法和传递参数
}
},2.父级页面
<payBox @ifpayshow="putpaydata"></payBox> <!--定义组件方法触发父页面putpaydata方法-->
------------------------------------------分割线
methods: {
putpaydata:function (payindex) { //接受子组件触发方法带过来的值
console.log(payindex)
},
},总结：组件操作父级页面需要先定义父级页面要触发的自定义方法，然后在父级页面的组件上去定义这些方法，再由这些自定义方法去触发函数
最后再贴一个完整的示例
组件页面
<style scoped="scoped">
body{
background: red;
}
.pay{
position: fixed;
top: 0px;
left: 0px;
z-index: 99;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
.pay_box{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 60%;
background: white;
padding: 10px;
margin:0px auto;
height: 100px;
margin-top: 100px;
border-radius: 5px;
}
.pay_box p{
text-align: center;
font-size: 14px;
padding-bottom: 10px;
}
.pay_box ul{
display: block;
width: 100%;
}
.pay_box ul li{
position: relative;
display: block;
line-height: 30px;
color: #515151;
font-size: 16px;
padding-left: 10px;
}
.pay_box ul li span{
position: absolute;
top: 50%;
left: 0px;
display: block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #f5f5f5;
margin-top: -6px;
}
.pay_box ul li.active{
color: orangered;
}
.pay_box ul li.active span{
border-left: 6px solid orangered;
}
</style>
<template>
<div id="pay">
<div class="pay">
<div class="pay_box">
<p>选择支付方式</p>
<ul>
<li v-for="(item,index) in paydata" :class="{active:payindex==index}" @click="paypick(index)"> <!-- 展示数据并添加点击事件-->
<span></span>
{{item.name}}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'pay',
props: ['text'], //接受从其他页面传过来的值
data() {
return {
payindex:"-1",
paydata:[
]
}
},
components: {
},
methods: {
paypick:function (index) {
this.payindex=index
this.$emit('ifpayshow',this.payindex) //点击选项后操作父页面方法
}
},
mounted: function() {
this.paydata=this.text //在这里接收父页面传过来的值
console.log(this.paydata)
}
/**/
}
</script>
<style>
</style>
引用组件的页面
<style scoped="scoped">
.pay_center{
padding-top: 30px;
}
.pay_center p{
text-align: center;
}
.pay_center p span{
color: orangered;
}
.pay_center button{
display: block;
background: #42B983;
outline: none;
color: white;
margin: 10px auto;
border: 0px;
padding: 5px 8px;
font-size: 14px;
border-radius: 6px;
}
</style>
<template>
<div id="index">
<div class="pay_center">
<p>使用：<span>{{payname}}</span>支付</p>
<button @click="paybut">选择支付方式</button>
</div>
<div v-show="payshow==true"> <!-- payshow来控制弹框的消失于隐藏-->
<payBox :text="paydata" @ifpayshow="putpaydata"></payBox> <!-- 由于数据经常在父页面，所以我们要给子组件传值-->
</div>
</div>
</template>
<script>
import paybox from './../components/pay.vue' //第一步：引入弹框组件 不要忘了引入组件的路径是否正确
export default {
name: 'index',
data() {
return {
payshow:false,
payname:"",
paydata:[
{
"name":"支付方式一"
},
{
"name":"支付方式二"
}
],
}
},
components: {
payBox: paybox , //在components 中把刚引入的paybox组件定义为payBox
},
methods: {
paybut:function () {
this.payshow=!this.payshow
},
putpaydata:function (payindex) { //接受子组件触发方法带过来的值
console.log(payindex)
this.payname=this.paydata[payindex].name
this.payshow=!this.payshow
},
},
mounted: function() {
}
/**/
}
</script>
<style>
</style>
写的不好的地方请见谅~ ~