Vue 组件的使用
2024-10-13 04:09:27
1、引入组件
import Week from '../week/main.vue' export default {
name: "classMain",
components: {
Week: Week
},
data(){
return {
schoolID: this.$route.params.id,//学校 id
portType: "incalss",//incalss,beike,iphone
isShowChildPages: false
}
},
methods: {
showChildPage: function () {
this.isShowChildPages = true;
},
closeChildPage: function (data) {
console.log(data);
this.isShowChildPages = false;
},
}
}
2、显示组件
<transition name="fade1">
<Week v-if="isShowChildPages" :portType="portType" @closeChildPage="closeChildPage"></Week>
</transition>
3、组件接受参数,并调用父级方法
export default {
name: 'weekMain',
watch: {
//如果路由发生了变化,更新页面数据
$route(to, from) {
if (to.path !== from.path) {
this.schoolID = this.$route.params.id;
}
}
},
props: {
portType: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
schoolID: this.$route.params.id,//学校 id
}
},
methods: {
//重点
closeChildPage: function () {
this.$emit('closeChildPage', false);
}
}
}
最新文章
- Find cmd
- 在linux下如何将文件夹打包
- 强制QQ好友
- PHP Yii2.0(一):环境搭建 &; 问题集锦
- c#记事本
- PHP中的错误处理和异常处理
- 文件IO和标准IO
- Spark官方文档——本地编写并运行scala程序
- iOS开发——多线程OC篇&;(十一)多线程NSOperation高级用法
- (转)[转]大数据时代的 9 大Key-Value存储数据库
- Java 核心技术-集合-集合框架
- [转] 舞蹈链(Dancing Links)——求解精确覆盖问题
- 【剑指offer】面试题27:二叉搜索树与双向链表
- semaphore实现浏览器的读写原理
- iOS7 Sprite Kit 学习
- OPNET中FIN,FOUT以及FRET的作用 分类: opnet 2014-05-12 16:07 144人阅读 评论(0) 收藏
- [Kubernetes]基于角色的权限控制之RBAC
- openstack搭建之-glance配置(9)
- docker-compose.yml 示例
- Problem B: STL——集合运算