vue2中引用组件之后如何获取组件中的值

在Vue 2中，当你引用一个组件并希望从子组件（子组件即子元素）获取值时，可以使用`props`属性来实现数据传递。父组件可以通过`v-bind`指令将数据绑定到子组件的`props`上，而子组件则通过`props`来接收这些值。

**示例**:

**父组件**（假设有一个名为`HeadTop`的组件，我们想在其内部显示一些标题信息）:

<template>
  <div>
    <HeadTop :title="pageTitle" /> <!-- 使用v-bind :prop-name="value" 传递值 -->
    <data-statistics></data-statistics> <!-- 其他子组件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: "这是标题",
    };
  },
};
</script>

**子组件**（`HeadTop.vue`）:

<template>
  <h1>{{ title }}</h1> <!-- 子组件内部直接展示接收到的值 -->
</template>

<script>
export default {
  props: { // 定义接受的props
    title: String, // 假设标题是字符串类型
  },
};
</script>

在这个例子中，`pageTitle`的值会被自动传递给`HeadTop`组件的`title` prop，子组件就可以通过`{{ title }}`来访问并显示这个值。