第25节: Vue3 带组件

特创数字科技2023-12-19 15:37

在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值来控制自己的显示状态。

第25节: Vue3 带组件

订阅专栏，每日更新

教学视频 Uniapp Vue3 基础到实战

第26节：Vue3 绑定到对象