可复用组件
Vue.js 的核心概念之一是组件化，即将 UI 拆分为独立的组件，每个组件负责一个特定的功能或视图。这使得你可以创建可复用的组件，并在不同的地方使用它们。
以下是一个简单的例子，展示了如何创建一个可复用的按钮组件：
<!-- Button.vue -->
<template>
<button @click="handleClick" :disabled="disabled">{{ label }}</button>
</template>
<script>
export default {
props: {
label: {
type: String,
required: true
},
disabled: {
type: Boolean,
default: false
}
},
methods: {
handleClick() {
this.$emit('click');
}
}
};
</script>
上述组件接收 label 和 disabled 两个属性，并在按钮被点击时触发自定义事件 click。
在父组件中使用该按钮组件：
<template>
<div>
<Button label="Click me" @click="handleButtonClick" />
</div>
</template>
<script>
import Button from './Button.vue';
export default {
components: {
Button
},
methods: {
handleButtonClick() {
console.log('Button clicked!');
}
}
};
</script>
这样你就可以在应用中的多个地方使用同一个按钮组件，实现了组件的可复用性。
组合
在 Vue.js 3.0 中，引入了 Composition API，使得组合成为了一种更灵活和强大的组织代码的方式。通过 setup 函数，你可以将组件的逻辑代码组织为可复用的函数。
以下是一个简单的例子，展示了如何使用组合：
<template>
<div>
<p>{{ formattedMessage }}</p>
</div>
</template>
<script>
import { ref, computed, onMounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue!');
const formattedMessage = computed(() => {
return message.value.toUpperCase();
});
onMounted(() => {
console.log('Component is mounted.');
});
return {
formattedMessage
};
}
};
</script>
在上述例子中，setup 函数包含了组件的逻辑代码，包括了一个响应式的 message 和一个计算属性 formattedMessage。onMounted 钩子用于在组件被挂载后执行一些操作。
使用组合的方式，你可以更灵活地组织和共享代码逻辑，实现更好的可维护性和可复用性。
总体来说，在 Vue.js 3.0 中，可复用组件和组合都是强大的工具，帮助你更好地组织和管理你的代码。根据项目的需要，你可以选择合适的方式来实现可复用性和组织性。
转载请注明出处：http://www.pingtaimeng.com/article/detail/506/Vue 3.0