第25节: Vue3 带组件

发布时间:2023年12月17日

在UniApp中使用Vue3框架时,你可以使用组件来封装可复用的代码块,并在需要的地方进行渲染。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用带组件:

<template>  
  <view>  
    <button @click="toggleActive">Toggle Active</button>  
    <my-component :is-active="isActive"></my-component>  
  </view>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
import MyComponent from './MyComponent.vue';  
  
const isActive = ref(false);  
const myComponent = MyComponent;  
const toggleActive = () => {  
  isActive.value = !isActive.value;  
};  
</script>

在上面的示例中,我们首先导入了一个名为MyComponent的组件,它可以根据isActive的值来决定是否显示一些内容。然后,在模板中,我们使用<my-component>标签将组件引入到页面中,并使用:is-active="isActive"来将isActive的值传递给组件。最后,我们定义了一个名为toggleActive的方法,用于在点击按钮时切换isActive的状态。这样,每次点击按钮时,组件的显示状态就会相应地变化。

下面是一个示例的组件文件MyComponent.vue

<template>  
  <view v-if="isActive">  
    <p>This is my component!</p>  
  </view>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
  
const isActive = ref(false);  
</script>

在组件文件中,我们使用<template>标签定义了组件的模板部分,其中使用v-if="isActive"来根据isActive的值决定是否显示<p>元素。然后,我们导入并声明了isActive响应式引用对象。这样,组件就可以根据外部传递的isActive值来控制自己的显示状态。

订阅专栏,每日更新

教学视频 Uniapp Vue3 基础到实战

第26节:Vue3 绑定到对象

文章来源:https://blog.csdn.net/weixin_54226053/article/details/135048021
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。