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

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

//父组件  

// 在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);
			}

即可

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中,组件可以使用 `defineProps` 来声明props,同时可以使用 `defineEmits` 来声明事件,通过事件来修改组件的数据。 在组件中,你可以使用 `watch` 监听props的变化,然后通过 `$emit` 触发自定义事件将修改后的数据传递给组件。 具体步骤如下: 1. 在组件中使用 `defineProps` 声明需要接收的prop,例如: ``` import { defineProps } from 'vue'; export default { props: defineProps({ count: Number }) } ``` 2. 在组件中使用 `watch` 监听props的变化,例如: ``` import { watch } from 'vue'; export default { props: defineProps({ count: Number }), setup(props) { watch(() => props.count, (newValue, oldValue) => { // 根据需要修改props数据 props.count = newValue + 1; // 触发自定义事件将修改后的数据传递给组件 emit('update:count', props.count); }); } } ``` 3. 在组件中使用组件时,传递需要修改props数据和自定义事件,例如: ``` <template> <div> <child-component :count="count" @update:count="count = $event"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { count: 0 } } } </script> ``` 上述代码中,组件将 `count` 作为props传递给组件,并监听组件触发的 `update:count` 事件,将传递的数据赋给 `count`。当组件监听到 `count` 发生变化时,会触发 `update:count` 事件将修改后的数据传递给组件。这样就实现了组件通过自定义事件修改组件传过来props数据的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值