在Vue3中，我们可以通过几种方式来注册组件，并实现组件间的通信，包括透传属性和事件，以及使用插槽。
- 全局注册和使用组件
// 创建一个组件
const MyComponent = {
template: '<div>Hello, I am a component!</div>'
}
// 全局注册组件
app.component('my-component', MyComponent)
// 在模板中使用
<template>
<my-component></my-component>
</template>
- 组件间通信 - Props
// 父组件
const ParentComponent = {
template: `
<child-component :parentMessage="message"></child-component>
`,
data() {
return {
message: 'Hello from parent'
}
}
}
// 子组件
const ChildComponent = {
props: ['parentMessage'],
template: `<div>{{ parentMessage }}</div>`
}
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)
- 组件间通信 - Events
// 子组件
const ChildComponent = {
template: `
<button @click="$emit('childEvent', 'Hello from child')">Click me</button>
`
}
// 父组件
const ParentComponent = {
template: `
<child-component @childEvent="handleEvent"></child-component>
`,
methods: {
handleEvent(payload) {
console.log(payload) // 输出: 'Hello from child'
}
}
}
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)
- 使用插槽
// 父组件
const ParentComponent = {
template: `
<child-component>
<template #default="{ user }">
{{ user.name }}
</template>
</child-component>
`
}
// 子组件
const ChildComponent = {
template: `
<div>
<slot :user="user"></slot>
</div>
`,
data() {
return {
user: {
name: 'John Doe',
age: 30
}
}
}
}
// 在父组件中使用子组件
app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)
以上代码展示了如何在Vue3中注册组件、通过props和events进行父子组件间的通信，以及如何使用插槽来传递和渲染子组件的内容。这些是构建Vue应用的基本技能，对于学习Vue3非常有帮助。