vue3.0的父子组件传值,
父传子,这个跟vue2.0X差不多<template><div class="home"><a-button type="primary" @click='goRight'>Primary</a-button><a-radio>Radio</a-radio><## 组件传值 ##><Drawer title=
·
父传子,这个跟vue2.0X差不多
<template>
<div class="home">
<a-button type="primary" @click='goRight'>
Primary
</a-button>
<a-radio>Radio</a-radio>
<## 组件传值 ##>
<Drawer title='详情页' :visible='visible' @afterVisibleChange='afterVisibleChange'></Drawer>
</div>
</template>
<script lang="ts">
import { onMounted,ref,reactive,toRefs } from 'vue';
import { useStore } from "vuex";
import { findAgentLogListByAgentId } from '@/assets/api/home'
import Drawer from '@/components/drawer.vue'
export default {
name:'home',
components: {
Drawer
},
setup(){
const visible:any = ref(false); //控制显示隐藏
const state:object =reactive({
})
onMounted(()=>{
});
const goRight=()=>{
visible.value = true
};
//这个是接收子组件传来的方法
const afterVisibleChange=(val:boolean)=>{
visible.value = val;
};
return {
goRight,visible,afterVisibleChange,...toRefs(state)
}
}
}
</script>
<style lang="less" scoped>
.home{
width: 100%;
height: 100%;
position: relative;
}
</style>
<style>
.ant-drawer-content-wrapper{
widows: 80%;
}
</style>
子组件
<template>
<a-drawer
:title="title"
placement="right"
width='70%'
:maskStyle='maskStyle'
:closable="true"
v-model:visible="visible"
:after-visible-change="afterVisibleChange"
>
<!-- <p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p> -->
</a-drawer>
</template>
<script lang='ts'>
import {ref,toRefs,reactive} from 'vue'
export default {
//这个为关紧
props: { //接收子组件传值
title: String,
visible:Boolean
},
setup(props:object,cex:any){ //接收子组件传值 //这个为关紧
const state = reactive({
maskStyle:{
"background-color": "rgba(0, 0, 0, 0)"
}
})
const afterVisibleChange=(val:boolean)=>{//子组件给父亲的方法
cex.emit('afterVisibleChange',val)
};
return {
...toRefs(state),afterVisibleChange,props
}
}
}
</script>
<style lang="less" scoped>
</style>
实际效果点击按钮侧边弹出,点击关闭实现关闭

更多推荐



所有评论(0)