vue3使用组件

在Vue3开发中会发现直接使用动态组件,不像Vue2中那样丝滑了,不是动态绑定组件名就能跑起来的,发现下面的尴尬:

看问题现象:


聪明的你来看看你是不是也是这么写的:

<script setup>
import { ref, watch } from "vue";

import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
import CompC from "./CompC.vue";
import CompD from "./CompD.vue";

const name = ref("CompA"); // 划重点
const currentName = ref("CompA"); // 划重点

watch(name,(v) => {
  currentName.value = v
})
</script>
<template>
  <div>
    <Space direction="vertical" size="large">
      <RadioGroup v-model="name">
        <Radio label="CompA"></Radio>
        <Radio label="CompB"></Radio>
        <Radio label="CompC"></Radio>
        <Radio label="CompD"></Radio>
      </RadioGroup>
    </Space>
    <div class="ctent">
      <component :is="currentName"></component>
    </div>
  </div>
</template>


结果你已经看到了,就是上面那张很精彩的效果
so, 我们直接 请出官文:Vue3 components 动态组件在setup 中的应用
其中动态组件中第一句话便是:
由于组件是通过变量引用而不是基于字符串组件名注册的,在

所以很明显,定义name和currentName的ref()就应该是个组件类型,非组件名称字符串
痛改前非后,其实有两种方式可解决

方法一:
    <script setup>
    import { ref, watch } from "vue";

    import CompA from "./CompA.vue";
    import CompB from "./CompB.vue";
    import CompC from "./CompC.vue";
    import CompD from "./CompD.vue";

    // 定义对象存储组件实例
    const compList = ref({
      CompA, // 'CompA':CompA 的简写
      CompB,
      CompC,
      CompD
    })
    const name = ref(CompA);
    const currentComp = ref(CompA);

    watch(name, (v) => {
      // 此时cruuentComp不再是组件名字符串,而是组件实例,所以问题到此结束
      currentComp.value = compList.value[v]
    })
    </script>
    <template>
      <Space direction="vertical" size="large">
        <RadioGroup v-model="name">
          <Radio label="CompA"></Radio>
          <Radio label="CompB"></Radio>
          <Radio label="CompC"></Radio>
          <Radio label="CompD"></Radio>
        </RadioGroup>
      </Space>
      <KeepAlive :include="['CompA', 'CompC']">
        <component :is="currentComp"></component>
      </KeepAlive>
    </template>

所以还是仔细看API,多翻阅,多尝试

方法二:
其实你不想看文档,也有办法,无非是组件不显示么,对吧,那好你可以在main.js里面把你想动态引入的组件导入,再挂载到app全局组件
<template>部分不动: 我还是我,我只是坐地日行八万里,我很专一,没有变,我允许你无视我

// main.js
   import CompA from "./components/CompA.vue";
   import CompB from "./components/CompB.vue";
   import CompC from "./components/CompC.vue";
   import CompD from "./components/CompD.vue";

   const app = createApp(App);

    app
      .component("CompA", CompA)
      .component("CompB", CompB)
      .component("CompC", CompC)
      .component("CompD", CompD);

   // 刚才的代码 compotent.vue
    <script setup>
   import { ref, watch } from "vue";

   const name = ref('CompA'); // 就写字符串
   const currentComp = ref('CompA');// 就写字符串

   watch(name, (v) => {
     currentComp.value = v  // 我还写字符串
   })     
   </script>
   <template>
     <Space direction="vertical" size="large">
       <RadioGroup v-model="name">
         <Radio label="CompA"></Radio>
         <Radio label="CompB"></Radio>
         <Radio label="CompC"></Radio>
         <Radio label="CompD"></Radio>
       </RadioGroup>
     </Space>
     <KeepAlive :include="['CompA', 'CompC']">
       <component :is="currentComp"></component>
     </KeepAlive>
   </template>
话不多少来看看效果吧:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 的自定义组件使用很简单。下面是一个简单的示例: 首先,在你的 Vue 项目中创建一个自定义组件的文件,例如 `MyComponent.vue`。 然后,在该文件中,你需要定义一个 Vue 组件。可以使用 `<template>` 标签来定义组件的 HTML 模板,使用 `<script>` 标签来定义组件JavaScript 代码,以及使用 `<style>` 标签来定义组件的 CSS 样式。 例如,`MyComponent.vue` 文件内容如下所示: ```vue <template> <div> <h2>{{ title }}</h2> <p>{{ content }}</p> </div> </template> <script> export default { props: { title: String, content: String, }, } </script> <style scoped> h2 { color: blue; } p { font-size: 16px; } </style> ``` 接下来,在你要使用该自定义组件的地方,例如 `App.vue` 文件中,你需要在模板中引入该组件使用 `<my-component>` 标签来引用该组件,并传递相应的属性值。 例如,`App.vue` 文件内容如下所示: ```vue <template> <div> <my-component title="Hello" content="Welcome to my custom component!"></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, }, } </script> <style> /* 可以在这里定义 App.vue 的样式 */ </style> ``` 现在,你就可以在你的 Vue 应用中使用自定义组件了。当你运行应用时,`MyComponent` 组件将会在页面上渲染出来,并显示相应的属性值。 希望以上内容对你有所帮助!如果你有任何其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值