Vue 子组件如何使用父组件的数据？ - 详细指南

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      message: 'Hello from parent component!'
    }
  },
  components: {
    ChildComponent
  }
}
</script>
<pre><code>
接下来，在子组件中，通过props接收父组件传递的数据，并在模板中使用它。可以像这样在子组件的props选项中声明要接收的属性：

```html
&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;{{ message }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: ['message']
}
&lt;/script&gt;
</code></pre>
<p>现在，子组件就可以访问并使用父组件的数据了。在子组件的模板中，使用双花括号语法（{{ message }}）来显示父组件传递的数据。</p>
<p>这样，子组件就可以使用父组件的data数据了。</p>