问题描述

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>

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

// 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>