第25节: Vue3 带组件
在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值来控制自己的显示状态。