使用VUE组件的插槽完成超链接案例，包含传入跳转地址、超链接默认文字等功能

在Vue.js中，插槽（Slots）是一个强大的功能，可以让你在组件内部动态地插入内容。要创建一个支持超链接并允许用户自定义跳转地址和默认文本的组件，我们可以设计一个名为`LinkComponent.vue`的组件模板，示例如下：

<template>
  <div class="link-component">
    <!-- 默认文字插槽 -->
    <slot name="default-text">{{ defaultText }}</slot>

    <!-- 超链接元素 -->
    <a :href="url" v-if="!isCustomUrl" @click.prevent="handleClick">{{ defaultText }}</a>

    <!-- 用户自定义URL插槽 -->
    <slot name="custom-url" v-if="isCustomUrl"></slot>
    
    <!-- 如果既没有默认文本也没有自定义URL，显示占位符 -->
    <span v-if="!(defaultText || isCustomUrl)">点击这里</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: '',
      defaultText: '默认链接',
      isCustomUrl: false,
    };
  },
  methods: {
    handleClick() {
      // 这里可以添加实际的跳转逻辑，如路由切换或window.location.href
      console.log('链接被点击');
    },
  },
};
</script>

<style scoped>
.link-component {
  /* 样式可按需调整 */
}
</style>

使用这个组件的示例：

<!-- 在父组件中调用LinkComponent -->
<LinkComponent>
  <!-- 默认文字 -->
  <template slot="default-text">点击前往官网</template>
  
  <!-- 自定义URL，如果存在则会覆盖默认文字 -->
  <template slot="custom-url" v-if="customLinkUrl">https://www.example.com</template>
</LinkComponent>