Vue3.0如何在 自定义指令中，插入组件

Question

问题描述

Vue3.0中使用自定义指令，如何在使用指令的元素上插入 组件

相关代码

• loading.vue

<template>
    <!--loading-->
</template>
<script>
    /*loading*/
</script>

• main.js

...
import Loading from '../loading.vue'
app.directive('loading',(el,binding) => {
    let loading = binding.value;
    /*如何将组件loading挂载到使用组件的el上？**/
})
...

• 组件中使用

<component v-loading="loading"></component>

<script>
...
setup() {
    let loading = ref(false)
    return {
        loading
    }
}
...
</script>

Answer 1

正好最近也在写这个指令。你可以参考下：

import Vue, { createVNode, render } from 'vue';

/**
 * 动态创建组件
 * @param hostEl 组件要挂载到的Dom
 * @param component 组件
 * @param params 组件参数
 */
function createComponent(hostEl: HTMLElement, component: any, params?: any) {
    // 创建虚拟节点
    let vNode: Vue.VNode | null = createVNode(component, params);
    // 渲染并挂载到宿主节点
    render(vNode, hostEl);
    // 销毁方法
    const destroy = () => {
        render(null, hostEl);
        vNode = null;
    };
    return { vNode, destroy };
}

使用时：

import { createComponent } from 'component.service';
import LoadingComponent from 'loading.component.vue';
// 创建组件
const props = {
        // ...
    },
    eventHandlers = {
        onClick: () => {},
        // ...
    },
    params = {
        ...props,
        ...eventHandlers,
    };
const { destroy } = createComponent(el, LoadingComponent, params);

// 销毁组件
destory();

Answer 2

题主是不是要写组件，然后通过属性控制

// loading.vue
<template>
    <div class="loading" v-show="loading" />
</template>
<script lang="ts">
    import { defineComponent } from 'vue'
    export default defineComponent({
     props: {
        loading: {
          type: Boolean,
          default: false
        }
      },
    })
</script>

//   组件中使用
<template>
  <Loading :loading="loading" />
</template>
<script lang="ts">
import Loading from './Loading.vue'
import { ref, defineComponent } from 'vue'

export default defineComponent({
  components:{
    Loading,
  },
  setup(){
    const loading = ref(true);
    
    return {
        loading
    }
  }
})
</script>