第十九节:带你梳理Vue2: 父组件向子组件传参(props传参)

在Vue2中，父组件可以通过props向子组件传递数据。这是一种单向数据流，父组件通过props将数据传递给子组件，子组件不能直接修改传递进来的props，应该使用自己的data或computed属性进行处理。

以下是一个简单的示例：

父组件 (ParentComponent.vue):

<template>
  <div>
    <child-component :parent-msg="message"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    };
  }
};
</script>

子组件 (ChildComponent.vue):

<template>
  <div>
    {{ parentMsg }}
  </div>
</template>
 
<script>
export default {
  props: {
    parentMsg: {
      type: String,
      default: ''
    }
  }
};
</script>

在这个例子中，父组件ParentComponent通过自定义属性parent-msg传递了一个名为message的数据给子组件ChildComponent。子组件通过声明接收props中的parentMsg，并在模板中使用它。注意，在子组件中，我们使用驼峰式命名法parentMsg来声明prop，但在父组件的模板中，我们使用短横线分隔法parent-msg来传递这个prop。