Vue3 使用动态组件 component

component 标签:用于动态渲染标签或组件。

语法格式:

<component is="标签或组件名">标签内容</component>

动态渲染标签:

<template>
  <h3>我是父组件</h3>
  <component is="h1">动态渲染 h1 标签</component>
</template>

动态渲染组件:

<template>
  <h3>我是父组件</h3>
  <button @click="isShow = !isShow">切换组件</button>
  <hr />
  <!-- 如果 isShow 为 true 就显示 A 组件,否则显示 B 组件 -->
  <component :is="isShow ? A : B"></component>
</template>

<script setup>
// 引入组件
import A from '../components/A';
import B from '../components/B';
// 引入 ref 函数
import { ref } from 'vue';
const isShow = ref(true);
</script>

原创作者:吴小糖

创作时间:2024.2.29 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3中,可以使用 `v-bind` 指令的 `.sync` 修饰符来实现父组件与子组件之间的双向绑定,从而获取子组件实例并调用子组件的方法。 首先,需要在父组件使用 `v-bind` 指令将子组件的实例绑定到父组件的一个变量上。例如: ```vue <template> <div> <component :is="selectedComponent" :child-instance.sync="childInstance"></component> <button @click="handleClick">Call Child's Method</button> </div> </template> <script> import ChildComponent1 from './ChildComponent1.vue' import ChildComponent2 from './ChildComponent2.vue' export default { components: { ChildComponent1, ChildComponent2 }, data() { return { selectedComponent: 'ChildComponent1', childInstance: null } }, methods: { handleClick() { if (this.childInstance) { this.childInstance.doSomething() } } } } </script> ``` 在子组件中,需要使用 `emit` 方法将子组件的实例暴露给父组件。例如: ```vue <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'Hello from ChildComponent1!' } }, mounted() { this.$emit('update:childInstance', this) }, methods: { doSomething() { console.log('ChildComponent1 is doing something...') } } } </script> ``` 这样,父组件就可以在 `childInstance` 变量中获取到子组件的实例,并调用子组件的方法。需要注意的是,这种方式只适用于动态组件,即使用 `v-bind` 指令的 `is` 属性来动态切换组件。如果是静态组件,可以直接通过 `ref` 获取子组件实例。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小吴吴吴呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值