컴포넌트 캡슐화(자식 컴포넌트는 상위 컴포넌트 값을 받고 상위 컴포넌트 값을 변경)

quit.vue 로그아웃 구성 요소는 별도로 패키지됩니다.

<template>
	<!-- 退出弹窗 -->
	<el-dialog v-model="parentCenterDialogVisible" title="提示" width="305px" center>
	   <span> 确认退出？</span>
	   <template #footer>
	     <span class="dialog-footer">
	       <el-button @click="Visible= false" style="margin-right:10px">取消</el-button>
	       <el-button type="primary" @click="quit()"
	         >确定</el-button>
	     </span>
	   </template>
	 </el-dialog>
</template>

<script>
	
	export default{
		name:'Quit',
		props:{
			parentCenterDialogVisible:String  //获取父组件传来的值
		},
		data(){
			return{
				Visible:true
			}
		},
		methods:{
			// 退出登录
			async quit(){
				this.Visible = false;  //弹窗退出
				this.$emit("pClose",false);  //触发父组件pClose事件，传至false
				this.$store.state.loginState = false;
				this.$store.state.token = '';
				this.$store.state.username = '';
				localStorage.removeItem("token");
				localStorage.removeItem("username");
				localStorage.removeItem("loginState");
				// 回到登录页
				this.$router.push({
					name:'Login'
				})
			},
		}
	}
</script>

<style>
</style>

상위 컴포넌트는 해당 값을 사용하고 하위 컴포넌트의 값을 수락합니다(이벤트를 사용하여 값 수신).

 <Quit :parentCenterDialogVisible="centerDialogVisible" @pClose="closeDialog($event)"> 
 </Quit>


	import Quit from '@/components/quit.vue'
   
   
   components:{
			Quit
		},
 
   data:{
       return{
      centerDialogVisible:false,
      }
     }


 方法methods中：
      // 子组件改变父组件
    closeDialog(msg){
		console.log("父组件接收子组件传的值")
		console.log(msg);
		this.centerDialogVisible=msg;  //接受子组件传过来的值
	},

성공적으로 포장! ! !