在Vue 中,父组件可以通过以下两种方式将数据传递给子组件:
props 属性:父组件在定义子组件时,可以通过 props 属性将数据传递给子组件,子组件可以通过 props 属性接收参数。例如:
父组件:
<template>
<div>
<child-component :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from parent component'
}
}
}
</script>
- 子组件:
```html
<template>
<div>{{message}}</div>
</template>
<script>
export default {
props: ['message']
}
</script>
- $emit 方法:子组件可以通过 $emit 方法触发一个自定义事件,并将参数传递给父组件。父组件可以通过监听这个自定义事件来接收参数。例如:
- 子组件:
```html
<template>
<div @click="handleClick">{{message}}</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('custom-event', 'Custom event triggered from child component')
}
}
}
</script>
- 父组件:
```html
<template>
<div>
<child-component @custom-event="handleCustomEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
methods: {
handleCustomEvent(event) {
console.log(event) // 输出: 'Custom event triggered from child component'
}
}
}
</script>
在上述示例中,父组件通过 props 属性向子
鹏仔前端 pjxi.com qinghuashu.com