diff --git a/README.md b/README.md index 1207bc7..ff32e58 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,101 @@ const helloKuRoot = ref('Hello AppKuVue') ``` +3. 如何使用 `App.ku.vue` 实例 ? + +有两种方法,局部或全部启用,请看一下示例 + +- 局部启用 + +1. 暴露出 App.ku 里所要被使用的变量或方法 + +```vue + + + + + +``` + +2. 在 template 内编写 root="xxx",并通过 const xxx = ref() 获取模板引用 + +> xxx 代表自定义命名,可以随意命名 + +```vue + + + + + +``` + +- 全局启用 + +1. 通过配置 `enabledGlobalRef` 开启全局自动注入 App.ku 实例 + +```js +// vite.config.* + +import { defineConfig } from 'vite' +import UniKuRoot from '@uni-ku/root' +import Uni from '@dcloudio/vite-plugin-uni' + +export default defineConfig({ + plugins: [ + UniKuRoot({ + enabledGlobalRef: true + }), + Uni() + ] +}) +``` + +2. 通过特有内置方法 `getCurrentPages()` 获取暴露的数据 + +```vue + + + + + +``` + ### ✨ 例子 > 以下例子均以CLI创建项目为例, HBuilderX 项目与以上设置同理, 只要注意是否需要包含 src目录 即可 diff --git a/examples/src/App.ku.vue b/examples/src/App.ku.vue index 425ebc7..c8cdeb3 100644 --- a/examples/src/App.ku.vue +++ b/examples/src/App.ku.vue @@ -2,7 +2,13 @@ import { ref } from 'vue' import GlobalToast from './components/GlobalToast.vue' -const HelloVueRef = ref('test') +const HelloVueRef = ref('Hello app.Ku.vue') + +const exposeRef = ref('this is form app.Ku.vue') + +defineExpose({ + exposeRef, +})