# vue-helper

**Repository Path**: white-kite/vue-helper

## Basic Information

- **Project Name**: vue-helper
- **Description**: 白鸢vue帮助包，解决vue2 部分hook生态缺失
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-25
- **Last Updated**: 2022-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# whitekite-vue-helper

白鸢vue帮助包

## @vue/composition-api

### vue-router

> 补全vue-router4的hook
>
> [vue-router4官网](https://next.router.vuejs.org/zh/api)

```ts
const router = useRouter()

const route = useRoute()
```

### vuex

> 补全vuex4的hook
>
> [vuex官网](https://next.vuex.vuejs.org/zh/api)

```ts
const store = useStore()
```

## initDefaultProps

fork by ant-design-vue

给vue-props赋值默认值的工具用，主要用于改写ant-design-vue组件，为业务组件使用

```ts
props: initDefaultProps({ vueprops }, { vueprops的初始值 })//->VueTypes
```

## withInstall

简单的局部安装vue组件工具

```ts
withInstallObject({ parent: 主组件, children: [...安装在主组件下的子组件] })
// or 
withInstall(主组件, ...安装在主组件下的子组件)

import Component from "./component";
import Header from "./Header";
import Footer from "./Footer";
import Content from "./Content";

Component.Header = Header
Component.Footer = Footer
Component.Content = Content

withInstall(Component, Header, Footer, Content)
// or
withInstallObject({ parent: Component, children: [Header, Footer, Content] })

export default Component
```

jsx 形式示例

```tsx
<Component> sss </Component>
<Component.Header>sssss</Component.Header>
<Component.Content>sssss</Component.Content>
<Component.Footer>ssssss</Component.Footer>
```

template形式示例

```vue

<template>
  <component>
    <component-header></component-header>
    <component-content></component-content>
    <component-footer></component-footer>
  </component>
</template>
<script>
import Component from "./component";

export default {
  components: {
    Component,
    ComponentHeader: Component.Header,
    ComponentFooter: Component.Footer,
    ComponentContent: Component.Content,
  }
}
</script>
```