Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/any86/vue-create-root
:lollipop: 不到1kb的小工具, 把组件变成this.$xxx命令.
https://github.com/any86/vue-create-root
component ts utils vue
Last synced: 3 months ago
JSON representation
:lollipop: 不到1kb的小工具, 把组件变成this.$xxx命令.
- Host: GitHub
- URL: https://github.com/any86/vue-create-root
- Owner: any86
- License: mit
- Created: 2019-06-08T07:30:00.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:48:35.000Z (over 1 year ago)
- Last Synced: 2024-03-28T07:43:50.930Z (3 months ago)
- Topics: component, ts, utils, vue
- Language: TypeScript
- Homepage: https://any86.github.io/vue-create-root/example/
- Size: 1.15 MB
- Stars: 147
- Watchers: 6
- Forks: 23
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-1kb - vue-create-root
README
# vue-create-root [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![npm bundle size (minified + gzip)][size-image]][size-url] [](https://codecov.io/gh/any86/vue-create-root) [](https://circleci.com/gh/any86/vue-create-root)
[size-image]: https://badgen.net/bundlephobia/minzip/vue-create-root
[size-url]: https://bundlephobia.com/result?p=vue-create-root
[npm-image]: https://img.shields.io/npm/v/vue-create-root.svg
[npm-url]: https://npmjs.org/package/vue-create-root
[downloads-image]: https://badgen.net/npm/dt/vue-create-root
[downloads-url]: https://npmjs.org/package/vue-create-root
:lollipop: 不到1kb的小工具, 把vue组件变成this.$xxx命令, 支持**插入组件到任意dom位置**.
## 安装
```shell
npm i -S vue-create-root
```
## cdn
```
https://unpkg.com/vue-create-root/dist/vue-create-root.umd.js
```
## 快速开始
初始化后，组件内可以直接使用 **this.\$createRoot** 渲染**任意组件**.
```javascript
import createRoot from 'vue-create-root';
// main.js
Vue.use(createRoot);
// xxx.vue
import UCom from '../UCom.vue';
{
mounted(){
// 默认组件被插入到尾部
this.$createRoot(UCom, {props: {value:'hello vue!'}});
// 或者简写为:
this.$createRoot(UCom, {value:'hello vue!'});
}
}
```
## 自定义命令: this.\$xxx
你可以定义任意命令类似**饿了么UI**, 比如`this.$alert` / `this.$Message.success`
```javascript
// main.js
// 初始化插件, 把createRootClass方法挂到Vue上
Vue.use(createRoot);
// 包装组件
const C = Vue.createRootClass(UCom);
// 定义this.$alert命令
// props对应组件的props属性
Vue.prototype.$alert = (props) => new C(props);
```
```javascript
// xxx.vue
this.$alert({isShow:true, content: "你好vue !"});
```
**注意**: 这里设计`Vue.createRootClass(UCom)`的意图是为了实现单/多例2种API, 比如上面的C的多例用法就是`new C()`, 而单例就是`C.init()`.
## 更多
[API](docs/API.md)
[更多示例](docs/example.md)
[为什么 Vue.createRootClass 要返回构造函数, 而不是直接生成组件?](docs/why.md)
[:rocket:返回顶部](#vue-create-root-----)