vue 解决子组件不能直接修改变父组件传过来的props值的问题。

最新推荐文章于 2024-11-21 14:53:44 发布

原创最新推荐文章于 2024-11-21 14:53:44 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了一个可复用的弹窗组件设计方案，包括如何通过父组件控制子组件的显示与隐藏状态，以及子组件如何反馈操作结果给父组件实现交互。

需求：做一个弹窗组件，进行重复利用。
需求分析：因为弹窗不是每次都弹，有一个判断，所以必须通过父组件传值来控制是否显示子组件，而且点击了子组件的确定以后，还必须传值给父组件，然后父组件再传值给子组件，达到关闭弹窗的效果。

//父组件  

// 在template里面写子组件
// isshow :isshow="PopupWindowData.isshow" 这个就是传值
// @closePopWindows="closePopWindows" 这个是子组件 使用 $emit 给父组件的时候调用的函数

<template>

    <PopupWindow :isshow="PopupWindowData.isshow"  @closePopWindows="closePopWindowsFun"></PopupWindow>

</template>


<script>
    //导入子组件
    import PopupWindow from "../../components/PopupWindow.vue"

    // 注册一下子组件
    export default {
	components: {
		PopupWindow
	},


    //传递给子组件的数据 
    data() {
		return {
            PopupWindowData:{
                isshow:false
            }
   
    // 子组件给的值会进入res  然后我们使用res 去改传给子组件的值即可
    methods: {
		closePopWindowsFun(res){
		this.PopupWindowData.isshow=res
	},
    

</script>

<template>
    //控制是否显示
	<view  v-if="isshow">
                //通过确定按钮来控制 传递值
    			<view @click.prevent="closeAlert1">确定</view>

    </view>

</template>

<script>
	export default {
        //用props接收一下 
		props: {
			isshow: {
				type: Boolean
			},

		methods: {
    
			closeAlert1(e) {

                //使用$emit 和 父组件的@closePopWindows  联系一下即可

				this.$emit('closePopWindows', false);
			}

即可