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);
相关文章
|
11月前
|
前端开发 JavaScript Java
Layui之入门
Layui之入门
75 0
|
10月前
|
前端开发 JavaScript API
Layui的入门
Layui的入门
85 0
|
11月前
|
前端开发 JavaScript 搜索推荐
layui入门
layui入门
53 0
|
12月前
|
JavaScript 前端开发 IDE
Vue3-组件化
Vue3-组件化
57 0
|
12月前
|
开发框架 前端开发 JavaScript
前端框架Layui的使用讲解(Layui搭建登录注册页面)(一)
前端框架Layui的使用讲解(Layui搭建登录注册页面)
565 0
|
9月前
|
前端开发 JavaScript 开发者
Layui 简单介绍及入门
Layui 简单介绍及入门
|
9月前
|
前端开发 JavaScript 开发者
Layui(入门)
Layui(入门)
57 0
|
10月前
|
XML 前端开发 Java
LayUI入门,以及介绍
LayUI入门,以及介绍
186 0
|
11月前
|
编解码 前端开发 API
LayUI入门
LayUI入门
44 0
|
12月前
|
XML 前端开发 Java
前端框架Layui的使用讲解(Layui搭建登录注册页面)(二)
前端框架Layui的使用讲解(Layui搭建登录注册页面)(二)
99 0