父组件向子组件传递数据通常通过props属性来实现。父组件可以在子组件的标签中使用v-bind指令将数据传递给子组件的props属性。在子组件中,可以通过props属性来接收这些数据。这种方式是一种单向数据流的方式,父组件传递数据给子组件,子组件接收并渲染这些数据。
vue2中使用props属性传递数据示例:
<!-- ParentComponent.vue -->
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent'
};
},
components: {
ChildComponent
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
};
</script>