Vue自定义组件子组件获取父组件的参数

以下是一个简单的例子：

自定义组件 (MyComponent.vue):

<template>
  <div>
    <!-- 使用传递进来的参数 -->
    <p>传递的参数是: {{ myParam }}</p>
  </div>
</template>
 
<script>
export default {
  props: {
    // 定义prop接收传递进来的参数
    myParam: {
      type: String,
      default: ''
    }
  }
}
</script>

父组件 (ParentComponent.vue):

<template>
  <div>
    <!-- 使用v-bind将当前页的参数传递给自定义组件 -->
    <my-component :my-param="currentPageParam"></my-component>
  </div>
</template>
 
<script>
import MyComponent from './MyComponent.vue';
 
export default {
  components: {
    MyComponent
  },
  data() {
    return {
      // 当前页的参数
      currentPageParam: '当前页的数据'
    }
  }
}
</script>

MyComponent 有一个prop叫做 myParam，它用来接收从父组件传递进来的数据。在父组件中，我们通过 :my-param="currentPageParam" 将 currentPageParam 这个数据绑定到 myParam prop 上，并传递给 MyComponent 组件。