创建组件
你可以使用 Vue.component 方法创建全局组件，或者在组件选项中创建本地组件。以下是一个创建全局组件的简单示例：
<!-- 全局组件的模板 -->
<template id="my-component">
<div>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script>
// 创建全局组件
Vue.component('my-component', {
template: '#my-component',
data() {
return {
title: 'Vue 3.0 组件',
content: '这是一个简单的组件示例。'
};
}
});
</script>
使用组件
在你的应用程序中，你可以使用组件标签来引入和使用组件：
<!-- 在应用程序中使用组件 -->
<div id="app">
<my-component></my-component>
</div>
<script>
// 初始化 Vue 应用程序
const app = Vue.createApp({});
// 挂载组件到应用程序
app.component('my-component', {
template: '#my-component',
data() {
return {
title: 'Vue 3.0 组件',
content: '这是一个简单的组件示例。'
};
}
});
// 挂载应用程序到 DOM
app.mount('#app');
</script>
组件通信
在 Vue 中，组件之间可以通过 props 和事件进行通信。父组件可以通过 props 将数据传递给子组件，而子组件可以通过事件向父组件发送消息。以下是一个简单的示例：
<!-- 父组件模板 -->
<template id="parent-component">
<div>
<child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>
</div>
</template>
<script>
// 父组件
app.component('parent-component', {
template: '#parent-component',
data() {
return {
parentMessage: '这是父组件的消息'
};
},
methods: {
handleChildEvent(message) {
console.log('从子组件接收到的消息：', message);
}
}
});
</script>
<!-- 子组件模板 -->
<template id="child-component">
<div>
<p>{{ message }}</p>
<button @click="sendMessageToParent">向父组件发送消息</button>
</div>
</template>
<script>
// 子组件
app.component('child-component', {
template: '#child-component',
props: ['message'],
methods: {
sendMessageToParent() {
this.$emit('child-event', '这是子组件发送的消息');
}
}
});
</script>
这只是 Vue 3.0 组件基础的一个简单介绍。Vue 还提供了许多其他功能，例如插槽、自定义事件等，以帮助你构建更复杂和灵活的应用程序。
转载请注明出处：http://www.zyzy.cn/article/detail/490/Vue 3.0