Vue3 父子组件

父组件

主要就是 导入子组件，template中通过“：”给值，通过@给方法

<template>
  <!-- 给子类的时候没有“，”全都是“：” @PageSizeChange=将方法传递给子类组件，-->
  <!-- 父类的方法是onPageSizeChange，子类接收的是@PageSizeChange -->
  <TableList
    :data="data"
    :pagination="pagination"
    :total="total"
    @PageSizeChange="onPageSizeChange"
    @CurrentChange="onCurrentChange"
  ></TableList>
</template>
<!-- 分开之后，页面在TableList中，业务逻辑在这里，通过template中的标签传递数据-->
<!-- 说白了就是把templete 里的静态页面摘除取，然后通过这里传递数据给页面-->
<script setup lang="jsx">

<!--导入子组件-->
import TableList from './components/TableList.vue'


const total = ref(0)
// data中存取数据
const data = ref([])

// 前后的一定要对应上啊
const pagination = ref({
  pageNum: 1,
  pageSize: 5
})

onMounted(() => {
  query()
})
function onPageSizeChange() {
  query()
}
function onCurrentChange() {
  query()
}
async function query() {
}


</script>

子组件

const props = defineProps({}）

const emit = defineEmits([‘'])

<script setup lang="jsx">
import { ref } from 'vue'
// 通过这个来接收父类的数据
const props = defineProps({
  data: {
    // 设置类型data是数组
    type: Array,
    // 设置默认值
    default: () => {
      return []
    }
  },
  // pagination是对象
  pagination: {
    type: Object,
    default: () => {
      // 设置对象的属性值
      return {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  total: {
    type: Number,
    default: () => {
      return 0
    }
  }
})
// 声明父组件传递过来的方法
const emit = defineEmits(['PageSizeChange', 'CurrentChange'])
// 调用该方法的时候，会调用父类组件方法
function onPageSizeChange() {
  emit('PageSizeChange')
}
function onCurrentChange() {
  emit('CurrentChange')
}
</script>

父组件调用子组件中的方法

<script>
// 移除图片时将图片设置为默认图片
const remove = () => {
  photoFile.value = []
  formData.value.image = ''
}

function handleClear() {
  remove()
  // 清空表单
  formData.value.reset()
  // 清空表单校验
  form.value.clearValidate()
}

// 向父组件暴露数据与方法
defineExpose({
  handleClear
})
</script>

向父组件暴露数据与方法，也就是给父组件

// 向父组件暴露数据与方法
defineExpose({
  handleClear
})

父组件接收以及调用的方式
通过

ref=“dialogFormRef”

接收

<template>
<!-- 添加和修改的表单 -->
  <DialogForm
    ref="dialogFormRef"
    :formVisible="DialogFormVisible"
    :title="DialogFormtitle"
    :Data="DialogFormData"
    @DialogClose="DialogClose"
    @DialogSave="DialogSave"
  ></DialogForm>
</template>

先定义，再通过

dialogFormRef.value.方法名来调用

<script>
//定义
const dialogFormRef = ref(null)
// 关闭表单
function DialogClose() {
  DialogFormVisible.value = false
  //调用子组件中的方法
  dialogFormRef.value.handleClear()
}
</script>