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);
相关文章
|
前端开发 JavaScript Java
Layui之入门
Layui之入门
95 0
|
前端开发 JavaScript API
Layui的入门
Layui的入门
109 0
|
前端开发 JavaScript 搜索推荐
layui入门
layui入门
65 0
|
开发框架 前端开发 JavaScript
前端框架Layui的使用讲解(Layui搭建登录注册页面)(一)
前端框架Layui的使用讲解(Layui搭建登录注册页面)
674 0
|
11月前
|
前端开发 JavaScript 开发者
Layui 简单介绍及入门
Layui 简单介绍及入门
|
11月前
|
前端开发 JavaScript 开发者
Layui(入门)
Layui(入门)
86 0
|
11月前
|
前端开发 数据格式
layui_02动态树
layui_02动态树
59 0
|
XML 前端开发 Java
LayUI入门,以及介绍
LayUI入门,以及介绍
221 0
|
前端开发 Java 数据库
LayUI之动态树
LayUI之动态树
49 0
|
编解码 前端开发 API
LayUI入门
LayUI入门
65 0