webpackJsonp([37],{LlmT:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("section",[e("h2",{attrs:{id:"create-api模块"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-create-api模块-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" create-api 模块")]),s._v(" "),s._m(0),s._v(" "),s._m(1),s._v(" "),e("h3",{attrs:{id:"createAPI(Vue,Component,[events,single])"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-createAPI(Vue,Component,[events,single])-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" createAPI(Vue, Component, [events, single])")]),s._v(" "),s._m(2),s._v(" "),e("h3",{attrs:{id:"如何在普通js文件中或者全局调用"}},[e("a",{staticClass:"anchor",attrs:{href:"#cube-如何在普通js文件中或者全局调用-anchor","aria-hidden":"true"}},[e("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[e("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 如何在普通 js 文件中或者全局调用")]),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),e("p",[s._v("或者内置的组件，例如 Dialog：")]),s._v(" "),s._m(5),s._v(" "),e("p",[s._v("还有一种思路是通过数据驱动，比如用 vuex 维护一个全局 state，在需要调用该组件时更新状态，然后在 App.vue 里去 watch 这个状态变化来调用该组件。")])])},staticRenderFns:[function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[s._v("该模块默认暴露出一个 "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" 函数，可以实现以 API 的形式调用自定义组件。并且既可以在 Vue 实例上下文中调用，也可以"),e("a",{attrs:{href:"https://didi.github.io/cube-ui/#/zh-CN/docs/create-api#cube-%E5%A6%82%E4%BD%95%E5%9C%A8%E6%99%AE%E9%80%9Ajs%E6%96%87%E4%BB%B6%E4%B8%AD%E6%88%96%E8%80%85%E5%85%A8%E5%B1%80%E8%B0%83%E7%94%A8-anchor"}},[s._v("在普通 js 文件中调用")]),s._v("。")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[e("strong",[s._v("注：")]),s._v(" 所有通过 "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" 实现的通过 API 的形式调用的自定义组件都需要通过 "),e("code",{pre:!0},[s._v("Vue.use")]),s._v(" 注册才可以。")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("ul",[e("li",[e("p",[s._v("参数：")]),s._v(" "),e("ul",[e("li",[e("code",{pre:!0},[s._v("{Function} Vue")]),s._v(" Vue 函数")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Function | Object} Component")]),s._v(" Vue 组件，组件必须有 name")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Array} [events]")]),s._v(" 组件实例 emit 的事件名集合")]),s._v(" "),e("li",[e("code",{pre:!0},[s._v("{Boolean} [single]")]),s._v(" 是否为单例")])])]),s._v(" "),e("li",[e("p",[s._v("用法：")]),s._v(" "),e("ul",[e("li",[e("p",[s._v("该方法在 Vue 的 prototype 上增加一个名为 "),e("code",{pre:!0},[s._v("$create{camelize(Component.name)}")]),s._v(" 的方法，这样就可以在其他组件中直接通过 "),e("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, [renderFn, single])")]),s._v(" 这样来实例化组件了，而且这个实例化组件的元素是被附加到 "),e("code",{pre:!0},[s._v("body")]),s._v(" 元素下的。")])]),s._v(" "),e("li",[e("p",[e("code",{pre:!0},[s._v("const instance = this.$createAaBb(config, renderFn, single)")])]),s._v(" "),e("p",[e("strong",[s._v("参数：")])]),s._v(" "),e("table",[e("thead",[e("tr",[e("th",[s._v("参数")]),s._v(" "),e("th",[s._v("说明")]),s._v(" "),e("th",[s._v("类型")]),s._v(" "),e("th",[s._v("默认值")]),s._v(" "),e("th",[s._v("示例")])])]),s._v(" "),e("tbody",[e("tr",[e("td",[s._v("config")]),s._v(" "),e("td",[s._v("配置参数，经处理后传给组件")]),s._v(" "),e("td",[s._v("Object")]),s._v(" "),e("td",[s._v("{}")]),s._v(" "),e("td",[s._v("-")])]),s._v(" "),e("tr",[e("td",[s._v("renderFn")]),s._v(" "),e("td",[s._v("可选参数，用于生成子 VNode 节点，一般场景是处理 slot")]),s._v(" "),e("td",[s._v("Function")]),s._v(" "),e("td",[s._v("-")]),s._v(" "),e("td",[s._v("function (createElement) {...}")])]),s._v(" "),e("tr",[e("td",[s._v("single")]),s._v(" "),e("td",[s._v("可选参数，创建的时候决定是否是单例的，优先级更高，如果没有传入 renderFn 的话，single 的值就是第二个参数的值")]),s._v(" "),e("td",[s._v("Boolean")]),s._v(" "),e("td",[s._v("createAPI() 中传入的 single")]),s._v(" "),e("td",[s._v("-")])])])]),s._v(" "),e("p",[e("strong",[s._v("配置参数 "),e("code",{pre:!0},[s._v("config")]),s._v("：")])]),s._v(" "),e("p",[s._v("默认所有的值都会当做 props，但是要排除 createAPI 传入的 "),e("code",{pre:!0},[s._v("events")]),s._v(" 中的事件（默认会做转换，例如："),e("code",{pre:!0},[s._v("events")]),s._v(" 的值为 "),e("code",{pre:!0},[s._v("['click']")]),s._v("，那么 "),e("code",{pre:!0},[s._v("config")]),s._v(" 中的 "),e("code",{pre:!0},[s._v("onClick")]),s._v(" 就是作为 "),e("code",{pre:!0},[s._v("click")]),s._v(" 事件的回调函数，而不是作为 props 传递给组件）。")]),s._v(" "),e("p",[s._v("1.8.0 版本后 "),e("code",{pre:!0},[s._v("config")]),s._v(" 中可以直接设置 "),e("code",{pre:!0},[s._v("$props")]),s._v(" 和 "),e("code",{pre:!0},[s._v("$events")]),s._v("，"),e("code",{pre:!0},[s._v("$props")]),s._v(" 中的值是"),e("strong",[s._v("响应式")]),s._v("的，自动监控当前实例化上下文（即 "),e("code",{pre:!0},[s._v("this.$createXx")]),s._v(" 中的 "),e("code",{pre:!0},[s._v("this")]),s._v("）的上对应的属性值：")]),s._v(" "),e("table",[e("thead",[e("tr",[e("th",[s._v("参数")]),s._v(" "),e("th",[s._v("说明")]),s._v(" "),e("th",[s._v("类型")]),s._v(" "),e("th",[s._v("默认值")]),s._v(" "),e("th",[s._v("示例")])])]),s._v(" "),e("tbody",[e("tr",[e("td",[s._v("$props")]),s._v(" "),e("td",[s._v("传递给组件的 Props")]),s._v(" "),e("td",[s._v("Object")]),s._v(" "),e("td",[s._v("-")]),s._v(" "),e("td",[s._v("{"),e("br"),s._v(" title: 'title',"),e("br"),s._v(" content: 'my content',"),e("br"),s._v(" open: false"),e("br"),s._v("}")])]),s._v(" "),e("tr",[e("td",[s._v("$events")]),s._v(" "),e("td",[s._v("组件的 Events 事件回调")]),s._v(" "),e("td",[s._v("Object")]),s._v(" "),e("td",[s._v("-")]),s._v(" "),e("td",[s._v("{"),e("br"),s._v(" click: 'clickHandler',"),e("br"),s._v(" select: this.selectHandler"),e("br"),s._v("}")])])])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("$props")]),s._v(" 示例，约定结构 "),e("code",{pre:!0},[s._v("{ [key]: [propKey] }")]),s._v("：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n  "),e("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'title'")]),s._v(",\n  "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'my content'")]),s._v(",\n  "),e("span",{attrs:{class:"hljs-attr"}},[s._v("open")]),s._v(": "),e("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n}\n")])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("title")]),s._v("、"),e("code",{pre:!0},[s._v("content")]),s._v("、"),e("code",{pre:!0},[s._v("open")]),s._v(" 就是传递给组件的 Prop 的 key，而对应 Prop 的值则按照如下规则获取：")]),s._v(" "),e("ol",[e("li",[s._v("如果是非字符串，则直接取配置的 "),e("code",{pre:!0},[s._v("propKey")]),s._v(" 作为值")]),s._v(" "),e("li",[s._v("如果是字符串，且配置的 "),e("code",{pre:!0},[s._v("propKey")]),s._v(" 不在当前实例上下文属性上，则直接取 "),e("code",{pre:!0},[s._v("propKey")]),s._v(" 作为值")]),s._v(" "),e("li",[s._v("是字符串，且在当前实例上下文属性上，那么直接获取当前实例上下文对应的 "),e("code",{pre:!0},[s._v("propKey")]),s._v(" 的值，且会监控这个值的变化实时更新到组件实例上")])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("$events")]),s._v(" 示例，约定结构 "),e("code",{pre:!0},[s._v("{ [eventName]: [eventValue] }")]),s._v("：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n  "),e("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'clickHandler'")]),s._v(",\n  "),e("span",{attrs:{class:"hljs-attr"}},[s._v("select")]),s._v(": "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandler\n}\n")])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("click")]),s._v("、"),e("code",{pre:!0},[s._v("select")]),s._v(" 就是事件名，而对应的事件回调则按照如下规则获取：")]),s._v(" "),e("ol",[e("li",[s._v("如果 "),e("code",{pre:!0},[s._v("eventValue")]),s._v(" 是非字符串，则直接取配置的 "),e("code",{pre:!0},[s._v("eventValue")]),s._v(" 作为值")]),s._v(" "),e("li",[s._v("如果 "),e("code",{pre:!0},[s._v("eventValue")]),s._v(" 是字符串，则直接获取当前实例上下文对应的 "),e("code",{pre:!0},[s._v("eventValue")]),s._v(" 的值")])]),s._v(" "),e("p",[s._v("1.10.0 版本以后 "),e("code",{pre:!0},[s._v("config")]),s._v(" 中可以设置 Vue 支持的所有的"),e("a",{attrs:{href:"https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth"}},[s._v("配置值")]),s._v("，但是必须要加 "),e("code",{pre:!0},[s._v("$")]),s._v("，例如：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createAaBb({\n  "),e("span",{attrs:{class:"hljs-attr"}},[s._v("$attrs")]),s._v(": {\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("id")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'id'")]),s._v("\n  },\n  "),e("span",{attrs:{class:"hljs-attr"}},[s._v("$class")]),s._v(": {\n    "),e("span",{attrs:{class:"hljs-string"}},[s._v("'my-class'")]),s._v(": "),e("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n  }\n})\n")])]),s._v(" "),e("p",[e("strong",[s._v("返回值 "),e("code",{pre:!0},[s._v("instance")]),s._v("：")])]),s._v(" "),e("p",[e("code",{pre:!0},[s._v("instance")]),s._v(" 就是组件实例。")]),s._v(" "),e("blockquote",[e("p",[s._v("这个实例会被"),e("strong",[s._v("附加或代理 "),e("code",{pre:!0},[s._v("remove")]),s._v(" 方法")])])]),s._v(" "),e("p",[s._v("如果调用了，该实例就会被销毁且会从 "),e("code",{pre:!0},[s._v("body")]),s._v(" 下移除。")]),s._v(" "),e("p",[s._v("如果说实例化上下文（即 "),e("code",{pre:!0},[s._v("this.$createXx")]),s._v(" 中的 "),e("code",{pre:!0},[s._v("this")]),s._v("）销毁的话会自动移除销毁该实例元素。")])])])]),s._v(" "),e("li",[e("p",[s._v("示例：")]),s._v(" "),e("p",[s._v("我们先编写一个 Hello.vue 组件：")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-html"}},[e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"clickHandler"')]),s._v(">")]),s._v("\n    {{content}}\n    "),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"other"')]),s._v(">")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("slot")]),s._v(">")]),s._v("\n  "),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n\n"),e("span",{attrs:{class:"hljs-tag"}},[s._v("<"),e("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(" "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v("="),e("span",{attrs:{class:"hljs-string"}},[s._v('"text/ecmascript-6"')]),s._v(">")]),e("span",{attrs:{class:"javascript"}},[s._v("\n  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'hello'")]),s._v(",\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("props")]),s._v(": {\n      "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": {\n        "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("String")]),s._v(",\n        "),e("span",{attrs:{class:"hljs-attr"}},[s._v("default")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'Hello'")]),s._v("\n      }\n    },\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      clickHandler(e) {\n        "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$emit("),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", e)\n      }\n    }\n  }\n")]),e("span",{attrs:{class:"hljs-tag"}},[s._v("</"),e("span",{attrs:{class:"hljs-name"}},[s._v("script")]),s._v(">")]),s._v("\n")])]),s._v(" "),e("p",[s._v("然后我们再通过 "),e("code",{pre:!0},[s._v("createAPI")]),s._v(" 把 Hello.vue 变成一个 API 式调用的组件并调用。")]),s._v(" "),e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Hello "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'./Hello.vue'")]),s._v("\n\n  "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 引入 Style 加载基础样式")]),s._v("\n  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" {\n    "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* eslint-disable no-unused-vars */")]),s._v("\n    Style,\n    Dialog,\n    createAPI\n  } "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n\n  Vue.use(Dialog)\n\n  "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 创建 this.$createHello API")]),s._v("\n  createAPI(Vue, Hello, ["),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v("], "),e("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(")\n\n  "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 初始化 Vue")]),s._v("\n  "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" Vue({\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("el")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'#app'")]),s._v(",\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("render")]),s._v(": "),e("span",{attrs:{class:"hljs-function"}},[e("span",{attrs:{class:"hljs-keyword"}},[s._v("function")]),s._v(" ("),e("span",{attrs:{class:"hljs-params"}},[s._v("h")]),s._v(") ")]),s._v("{\n      "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" h("),e("span",{attrs:{class:"hljs-string"}},[s._v("'button'")]),s._v(", {\n        "),e("span",{attrs:{class:"hljs-attr"}},[s._v("on")]),s._v(": {\n          "),e("span",{attrs:{class:"hljs-attr"}},[s._v("click")]),s._v(": "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".showHello\n        }\n      }, ["),e("span",{attrs:{class:"hljs-string"}},[s._v("'Show Hello'")]),s._v("])\n    },\n    "),e("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n      showHello() {\n        "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 直接调用")]),s._v("\n        "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 传入配置对象，默认传入的所有对象全都当做 props 传入组件")]),s._v("\n        "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 除了在调用 createAPI 的时候传入了 events，这里对应的就是")]),s._v("\n        "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// on{event name} 会被当做事件回调处理")]),s._v("\n        "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" instance = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createHello({\n          "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'My Hello Content'")]),s._v(",\n          onClick(e) {\n            "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),e("span",{attrs:{class:"hljs-string"}},[s._v("'Hello component clicked.'")]),s._v(")\n          }\n        }, "),e("span",{attrs:{class:"hljs-comment"}},[s._v("/* renderFn */")]),s._v(" (createElement) => {\n          "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" [\n            createElement("),e("span",{attrs:{class:"hljs-string"}},[s._v("'p'")]),s._v(", {\n              "),e("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'other'")]),s._v("\n            }, "),e("span",{attrs:{class:"hljs-string"}},[s._v("'other content'")]),s._v(")\n          ]\n        })\n        "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 通过 Vue 组件的 $on 也是可以监听的，看使用场景")]),s._v("\n        instance.$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'click'")]),s._v(", (e) => {\n          "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" $dialog = "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n            "),e("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(",\n            "),e("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'点击确定关闭当前实例'")]),s._v(",\n            "),e("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n          })\n          $dialog.show()\n\n          $dialog.$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'confirm'")]),s._v(", () => {\n            "),e("span",{attrs:{class:"hljs-comment"}},[s._v("// 销毁实例")]),s._v("\n            instance.remove()\n          }).$on("),e("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(", () => {\n            "),e("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),e("span",{attrs:{class:"hljs-string"}},[s._v("'cancel'")]),s._v(")\n          })\n        })\n      }\n    }\n  })\n")])]),s._v(" "),e("p",[s._v("示例中就是创建了一个需要 API 调用的组件 "),e("code",{pre:!0},[s._v("Hello")]),s._v("，然后在其他组件中去使用，重点就是 "),e("code",{pre:!0},[s._v("showHello()")]),s._v(" 方法做的事情：调用 "),e("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" 实现组件的实例化。")])])])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("p",[s._v("一般当你在 Vue 实例中，你可以直接通过 "),e("code",{pre:!0},[s._v("this.$createHello(config, renderFn)")]),s._v(" 调用该组件。而如果在普通 JS 中"),e("code",{pre:!0},[s._v("this")]),s._v("不是 Vue 实例，这时就可以通过组件本身的 "),e("code",{pre:!0},[s._v("$create")]),s._v(" 来进行实例化了，比如：")])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Hello "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'./hello.vue'")]),s._v("\n\nHello.$create(config, renderFn)\n")])])},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("pre",{pre:!0},[e("code",{attrs:{"v-pre":"",class:"language-js"}},[e("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Dialog } "),e("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),e("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\nDialog.$create({\n  ...\n})\n")])])}]}},"Nx+F":function(s,t,e){s.exports=e("PtgT")},PtgT:function(s,t,e){var a=e("VU/8")(null,e("LlmT"),null,null,null);s.exports=a.exports}});