讯响模板网站,wordpress插件教程,付网站建设费用会计分录,wordpress 3.5 下载地址父组件
主要就是 导入子组件#xff0c;template中通过“#xff1a;”给值#xff0c;通过给方法
template!-- 给子类的时候没有“#xff0c;”全都是“#xff1a;” PageSizeChange将方法传递给子类组件#xff0c;--!-- 父类的方法是onPageSi…父组件
主要就是 导入子组件template中通过“”给值通过给方法
template!-- 给子类的时候没有“”全都是“” PageSizeChange将方法传递给子类组件--!-- 父类的方法是onPageSizeChange子类接收的是PageSizeChange --TableList:datadata:paginationpagination:totaltotalPageSizeChangeonPageSizeChangeCurrentChangeonCurrentChange/TableList
/template
!-- 分开之后页面在TableList中业务逻辑在这里通过template中的标签传递数据--
!-- 说白了就是把templete 里的静态页面摘除取然后通过这里传递数据给页面--
script setup langjsx!--导入子组件--
import TableList from ./components/TableList.vueconst 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 langjsx
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
