前言
因為vue2去除了父子組件的雙向數據綁定,所以在子組件是不允許修改父組件的屬性的，控制臺會報如下錯誤:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result" (found in component )
解決辦法
在子組件data中定義一個父組件傳遞過來的副本,再把該副本利用this.$emit("","")給傳回去，父組件利用自定義事件接受該值
子組件
<template>
<div class="popup-bg" v-bind:class="{active:show}">
<div class="popup">
<div class="info">
{{content}}
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default{
data(){
return {
timers: [],
show: this.isActive
}
},
props: {
content: {},
isActive: {
type: Boolean
},
},
created(){
},
methods: {
autoClose(){
const t = setTimeout(() => {
this.show = false;
}, 1000);
this.timers.push(t)
}
},
watch: {
isActive: function (val) {
//清空一下timers
if(this.timers){
this.timers.forEach(timer=>{
window.clearTimeout(timer);
})
}
this.show = val
this.timers = [];
this.autoClose();
},
show:function (val) {
this.$emit("on-result-change",val);//發送副本給父組件
}
}
}
</script>
父組件
<template>
<div class="index">
<v-header :isActive="false" :title="title"></v-header>
<div class="content">
<button @click="show_">點擊</button>
<recruit-info></recruit-info>
</div>
<div class="footer">
<v-footer></v-footer>
</div>
<popup :content="content" :isActive="show" @on-result-change="onResultChange"> </popup>
</div>
</template>
<script type="text/ecmascript-6">
import header from '../../component/header/header.vue';
import footer from '../../component/footer/footer.vue';
import recruitInfo from '../../component/recruit-info/recruit-info.vue'
import popup from '../../component/popup/popup.vue'
export default{
data(){
return {
title: String,
show: Boolean,
content: "",
}
},
created (){
this.title = "拉勾網";
this.show = false
},
components: {
"v-header": header,
"v-footer": footer,
"recruit-info": recruitInfo,
"popup": popup
},
methods: {
show_: function () {
this.content = "hello world";
this.show = true
},
onResultChange(val){//自定義事件接受子組件傳遞過來的參數
this.show = val
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.index
position: relative
height: 100%
.content
overflow: auto
overflow-x: hidden
padding-bottom: 45px
.footer
position: fixed
bottom: 0
height: 45px
width: 100%
</style>
```
