Layui 组件化

简介: Layui 组件化

使用:

noticetab.html

<!--不要写html标签-->
<div class="wrapper-header-fix">
  <h1>11111</h1>
</div>


主页加载组件

<!DOCTYPE html>
<html>
  ....
  <div id="noticeDiv">
</html>
layui.$("#noticeDiv").load("component/noticetab.html", function(){
  console.log('load success')
  });


组件化之后页面如何与组件之间进行交互?


定义监听

window.addEventListener('upd_info',function(e){
  console.log(e.detail);
  })


调用

var param = {name: '张三'}
var mevent = new CustomEvent('upd_info', {
      // param 是要传的参数
   detail:param
});
window.dispatchEvent(mevent);
相关文章
|
8天前
|
存储 前端开发 UED
React 面包屑组件 Breadcrumb 详解
面包屑导航是现代Web应用中常见的UI元素,帮助用户了解当前位置并快速返回上级页面。本文介绍如何使用React构建面包屑组件,涵盖基本概念、实现方法及常见问题。通过函数式组件和钩子,结合React Router动态生成路径,处理嵌套路由,并确保可访问性。示例代码展示了静态和动态面包屑的实现,帮助开发者提升用户体验。
110 73
|
2月前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
2月前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
34 1
|
4月前
|
JavaScript
Vue2走马灯扩展版(Carousel)
这篇文章介绍了如何在Vue 3框架中创建一个可自定义的走马灯(Carousel)组件,支持自动播放、导航、分页和响应用户交互等功能。
232 0
Vue2走马灯扩展版(Carousel)
|
7月前
|
JavaScript 前端开发
Vue3中teleport 组件是干什么用的
Vue3中teleport 组件是干什么用的
133 1
|
7月前
|
JavaScript 前端开发 测试技术
Vue 3.0 Teleport
Vue 3.0 Teleport
47 0
|
JavaScript API
如果使用Vue3.0实现一个 Modal,你会怎么进行设计?
如果使用Vue3.0实现一个 Modal,你会怎么进行设计?
155 0
如果使用Vue3.0实现一个 Modal,你会怎么进行设计?
|
前端开发
React-组件-CSS模块化
React-组件-CSS模块化
67 0
|
JavaScript 前端开发 开发者
使用Vue.js构建单页应用:响应式UI和组件化开发
Vue.js是一种流行的JavaScript框架,广泛用于构建现代化的单页应用程序。它以其简洁的语法、灵活的架构和强大的响应式能力而备受开发者青睐。本文将介绍如何使用Vue.js构建单页应用,并重点关注响应式UI和组件化开发的重要性。
220 0
|
前端开发 JavaScript 安全