vue- cli子元件向父頁面執行操作
阿新 • • 發佈：2018-12-22
//開始了
在專案中經常會用到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>
寫的不好的地方請見諒~ ~