组件通讯

组件同步通讯

1.7.x 以上版本

异步通讯在业务比较复杂的情况下，会增加使用难度，1.7.x 以后推荐使用同步加载组件的方式，需要工程化的支持。

假设 component1,component2,component3 在 pages/components目录下

pages/main/main.html

...
<component id="comp1"></component>
<component id="comp2"></component>
<component id="comp3"></component>
...

pages/main/main.js

loader.define(function (requires, exports, module, global) {


  var component1 = null,
      component2 = null,
      component3 = null;

  var pageview = {
    init: async function(){

      // 组件1
      component1 = await loader.syncLoad({
        id: "#comp1",
        url: "pages/components/component1/index.html",
        param: {},
      });

      // 组件2
      component2 = await loader.syncLoad({
        id: "#comp2",
        url: "pages/components/component2/index.html",
        param: {},
      });
      // 组件3
      component3 = await loader.syncLoad({
        id: "#comp3",
        url: "pages/components/component3/index.html",
        param: {},
      });

    // 组件1可以拿到子组件的方法进行操作
    // component1.childs1

    }
  }

  // 初始化
  pageview.init();

  return pageview;
});

component1 组件，里面有 3 个组件

pages/components/component1/index.html

...
<component id="child1"></component>
<component id="child2"></component>
<component id="child3"></component>
...

pages/components/component1/index.js

loader.define(function (requires, exports, module, global) {

  var childs1 = null,
      childs2 = null,
      childs3 = null;

  var pageview = {
    init: async function(){
      // 子组件内部兄弟组件的交互

      // 组件1-1
      childs1 = await loader.syncLoad({
        id: "#child1",
        url: "pages/components/component1/child-1.html",
        param: {},
      });
      // 组件1-2
      childs2 = await loader.syncLoad({
        id: "#child2",
        url: "pages/components/component1/child-2.html",
        param: {},
      });
      // 组件1-3
      childs3 = await loader.syncLoad({
        id: "#child3",
        url: "pages/components/component1/child-3.html",
        param: {},
      });

    }
  }

  // 初始化
  pageview.init();

  return {
    childs1,
    childs2,
    childs3,
  };
});

component1 的 child1 组件的定义

pages/components/component1/child-1.html

<div class="bui-btn">按钮</div>

pages/components/component1/child-1.js

loader.define(function (requires, exports, module, global) {
  // 1.6.x 通过模块的id来获取不同的参数，所有属性的参数都会被拿到.
  // var params = bui.history.getParams(module.id);
  // 1.7.x
  let params = module.props;
  // 通过缓存module.id 绑定可以防止组件的重复绑定问题
  let mid = module.id;
  let $btn = router.$(`#${mid}`).find(".bui-btn");

  // 通过对象来描述组件的信息，便于维护
  const pageview = {
    init() {
      // 绑定事件
      this.bind(params);
      this.addColor(params);
    },
    addColor(opt) {
      // 增加样式
      opt.color && $btn.addClass(opt.color);
    },
    bind() {
      let that = this;
      $btn.click(function (e) {
        // 如果外部传方法，则点击的时候要执行该方法
        params.callback && params.callback.call(that, e);
      });

      return this;
    },
  };

  // 自执行
  pageview.init();

  // 可以抛出组件里面的方法给外部操作，也可以不抛出
  return pageview;
});

组件异步通讯

组件异步通讯的开发方式太过零散，已经不推荐了

BUI 1.6.2 以上版本.

路由初始化以后就会去找 main 入口页, 假设main由 3 个组件组成, 会依次,从上到下加载组件, 加载以后再递归查找子组件, 如此反复.

父组件获取子组件

pages/main/main.html

<component id="searchbar" name="pages/components/searchbar/index"></component>
<component id="list" name="pages/components/list/index"></component>

pages/main/main.js

loader.define(function () {
  // 监听 多个子组件加载完成就会触发一次
  loader.waited(["searchbar", "list"], function (searchbar, list) {
    // 拿到子组件实例操作
    console.log(searchbar);
    console.log(list);
  });
});

子组件获取父组件

list 组件 pages/components/list/index.js

loader.define(function(require,export,module){
    // 1.6.1 的方式
    // var params = bui.history.getParams(module.id);
    // var parentComp = bui.history.getComponent(params.parentId);


    // 1.6.2 的方式
    var parentComp = bui.history.getParentComponent();
    // 拿到父组件return 出来的方法, 就可以操作父组件.

})

子组件获取页面组件

list 组件 pages/components/list/index.js

loader.define(function(require,export,module){
    // 无论被嵌套多少层都可以直接获取到页面组件
    var pageComp = bui.history.getLast("exports");

})

兄弟组件

比方页面由 搜索组件, 列表组件 组成, 点击搜索, 要操作列表的方法重新带上关键字请求;

页面组件 pages/main/main.html

<div class="bui-page bui-box-vertical">
  <header></header>
  <main>
    <!-- 搜索组件 -->
    <component id="search" name="pages/components/searchbar/index"></component>
    <!-- 列表组件 -->
    <component id="list" name="pages/components/list/index"></component>
  </main>
</div>

search 组件 pages/components/search/index.js

loader.define(function(require,export,module){
    var pageview = {
      init: function(){
        // 这样是获取不到list组件的 refresh 方法, 因为list比search晚加载.
        // var list = bui.history.getComponent("list");
        let mid = module.id;
        let $module = bui.$(`#${mid}`);
        let $btn = $module.find("#btnSearch");
        $btn.click(function(){

            // 在点击的时候可以获取到兄弟list组件.
            var list = bui.history.getComponent("list");

            // 获取搜索的关键字
            var keyword = $module.find(".search-input").val();

            // 调用列表组件的局部属性方法, 把关键字传过去.
            list.refresh(keyword);
        })
      }
    }
    // 初始化
    pageview.init();
    return pageview
})

list 组件 pages/components/list/index.js

loader.define(function(require,export,module){
    var pageview = {
      init: function(){

      },
      refresh: function(keyword){
        // 接收到搜索传来的关键字进行请求操作
        console.log(keyword)
      }
    }
    // 初始化
    pageview.init();
    return pageview
})

注意, 搜索组件在初始化直接获取 list 组件, 会获取不到, 因为 list 比 search 晚加载.