0
点赞
收藏
分享

微信扫一扫

Vue父组件 和 子组件 相互调用修改参数的问题-解决


简介:

我们按照正常流程走一遍:

当我点击页面的显示窗口会弹出子界面的弹窗,然后当我点击关闭图标或者点击遮罩层都会调用子组件中的​​onClose​​​方法,然后更改父组件的​​exchangeShow​​为false时子组件的弹窗会消失

使用到了Vant的Popup 弹出层

Vue父组件 和 子组件 相互调用修改参数的问题-解决_javascript

界面样式:

Vue父组件 和 子组件 相互调用修改参数的问题-解决_ico_02

父组件代码:

<template>
<div class="container">
<div class="exchange">
<div class="exchange-btn" @click="onPopupShow">点击显示窗口</div>
</div>
<!-- 点击显示弹窗 -->
<Info :show="exchangeShow" />
</div>
</template>

<script>
//引入子组件
import Info from "./component/index"

export default {
components: {
Info
},
data() {
return {
exchangeShow: false,
};
},
created() {

},
methods: {
onPopupShow() {
console.log("点击显示前的exchangeShow状态",this.exchangeShow)
this.exchangeShow = true;
console.log("点击显示完成后的exchangeShow状态",this.exchangeShow)
},
},
};
</script>

子组件代码:

<template>
<van-popup v-model="nodeShow" position="center" :style="{width: '80%','border-radius': '4px',}" @click-overlay="onClose">
<div class="exchange-popup-close" @click="onClose">
<van-icon class="exchange-popup-close-icon" name="cross" />
</div>
<div class="exchange-header van-hairline--bottom">显示窗口</div>

</van-popup>
</template>

<script>
import { Popup } from 'vant';
export default {
name: 'test',
props:{
show: {
type: Boolean,
required:true
}
},
components:{
Popup
},
computed:{
},
data(){
return{
nodeShow:this.show
}
},
created(){
console.log("子组件show状态:",this.show)
},
methods:{
onClose() {
console.log("点击更改父组件的值")
this.handleShowChange(false);
},
handleShowChange(v) {
this.$emit('update:show', v);
}
}
};
</script>

测试效果是不是预期想的那样:

点击按钮,可以看出点击后的状态已经变成true了,那么子组件应该跳出弹窗展示才对

Vue父组件 和 子组件 相互调用修改参数的问题-解决_前端_03


你们的看到这个问题,会怎么描述这个问题?

1.Vue父组件属性更改子组件值不变

​父组件修改值时,子组件获取的值不变​

解决方式:(监听)

在子组件中添加监听:

:{
//父组件传递需要监听的值
show:{
deep:true,/*深度监听*/
handler(newV,oldV){/*newV变化的新值, oldV变化前的值 */
this.nodeShow=newV
}
}
}

Vue父组件 和 子组件 相互调用修改参数的问题-解决_ico_04

演示效果:

可以看出该结果是正常的

Vue父组件 和 子组件 相互调用修改参数的问题-解决_前端_05

2.子组件通过​​$emit​​修改父属性值不成功

问题二的出现:

当我点击遮罩关闭窗口后,在点击显示窗口按钮发现没效果了,下面我们分析下,看图理解下

Vue父组件 和 子组件 相互调用修改参数的问题-解决_前端_06


那这个问题怎么描述?

子组件通过​​$emit​​修改父属性值不成功

Vue父组件 和 子组件 相互调用修改参数的问题-解决_前端_07

添加关键字(.sync)

在使用子组件的绑定属性添加​​.sync​​修饰符

Vue父组件 和 子组件 相互调用修改参数的问题-解决_属性值_08


修改完看效果

演示效果:

在点击显示可以看出状态值已经从false保存true并且弹窗也正常显示了

Vue父组件 和 子组件 相互调用修改参数的问题-解决_属性值_09

3.子组件使用$emit调用父组件方法并且传值

改造子组件:

在子组件中​​添加按钮​

<div type="primary" class="exchange-btn button-active gray" @click="onSubmit">
调用父的方法
</div>

并且添加点击事件​​onSubmit​

Vue父组件 和 子组件 相互调用修改参数的问题-解决_前端_10

​onSubmit方法​​:

onSubmit(){
//调用子组件的事件把参数传递给父方法中
this.$emit('finish', "演示完成");
}

Vue父组件 和 子组件 相互调用修改参数的问题-解决_vue.js_11

修改父组件:

添加​​finish​​​事件,这个​​事件名称​​​要和​​子组件中的$emit中的事件名称要一样​

Vue父组件 和 子组件 相互调用修改参数的问题-解决_vue.js_12


这样子组件就可以调用父的方法

父组件的方法:​​finishTest(v)​​v是用于接受子组件的参数值

finishTest(v){
console.log("子组件调用父组件方法并且传递参数",v)
}

Vue父组件 和 子组件 相互调用修改参数的问题-解决_vue.js_13

演示效果:

可以看出我点击按钮,调用父组件方法已经成功了,并且也把值传递给父组件了

Vue父组件 和 子组件 相互调用修改参数的问题-解决_javascript_14


举报

相关推荐

0 条评论