DEV Community

wszgrcy
wszgrcy

Posted on

Call Vue library in Angular

#angular #vue
  • Previously implemented the call to the React library Currently, Vue library calls are supported
  • React and Vue have similarities in some designs, so their implementations and calls are basically the same

demo

npm

Currently supports calling

  • Directly calling the vue component in the ng component 
<vue-outlet [component]="xxxx" [root]="true" #root></vue-outlet>
Enter fullscreen mode Exit fullscreen mode
  • Directly calling the ng component in the vue component 
<NgOutletVue component={OutletRefTestComponent}></NgOutletVue>
Enter fullscreen mode Exit fullscreen mode
  • When ng calls the Vue component, children can be either the Vue component or the ng component (projection) 
<vue-outlet [component]="xxxx" #child></vue-outlet> <!-- named slot --> <vue-slot-group [name]="'xxx'"> <ng-template #child let-input1="input1"></ng-template> </vue-slot-group>
Enter fullscreen mode Exit fullscreen mode

example

  • ant-design-vue 
<vue-outlet [component]="Tree" [root]="true" [(model)]="bindModel" [props]="props"> <vue-slot-group [name]="'title'"> <ng-template #child let-key="key" let-title="title"> @if (key === '0-0-1-0') { <span style="color: #1890ff">{{ title }}</span> }@else{ {{ title }} } </ng-template> </vue-slot-group> </vue-outlet>
Enter fullscreen mode Exit fullscreen mode 
import { Component } from '@angular/core'; import { VueOutlet, VueSlotGroup } from '@cyia/ngx-bridge/vue-outlet'; import { Button, Tree, TreeProps } from 'ant-design-vue'; const treeData: TreeProps['treeData'] = [ { title: 'parent 1', key: '0-0', children: [ { title: 'parent 1-0', key: '0-0-0', disabled: true, children: [ { title: 'leaf', key: '0-0-0-0', disableCheckbox: true }, { title: 'leaf', key: '0-0-0-1' }, ], }, { title: 'parent 1-1', key: '0-0-1', children: [{ key: '0-0-1-0', title: 'sss' }], }, ], }, ]; const expandedKeys = ['0-0-0', '0-0-1']; const selectedKeys = ['0-0-0', '0-0-1']; const checkedKeys = ['0-0-0', '0-0-1']; @Component({ selector: 'app-ant-design-vue-demo', standalone: true, imports: [VueOutlet, VueSlotGroup], templateUrl: './ant-design-vue-demo.component.html', styleUrl: './ant-design-vue-demo.component.scss', }) export class AntDesignVueDemoComponent { Tree = Tree; treeData = treeData; bindModel = { expandedKeys, selectedKeys, checkedKeys }; props = { checkable: true, treeData: treeData, }; }
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
ng10x profile image
NG10x • • Edited

No one should ever do this. this is so counter productive and a big waste of time.