vue，组件调用通用组件，如何控制不同页面显示组件内的不同内容？

Question

在项目中需要将头部一些选择条件抽出来封装通用组件，但是需要不同页面显示不同的内容。

自己有尝试过，通过调用通用组件的组件（父组件）传参去控制，但始终觉得有其他好的方式，比如vuex是否能做到。但是对它涉足不深，请求大神指教！

相关代码

// 父组件调用，这里只是做了按钮的功能，没做显示隐藏功能功能

父组件
      <condition
        @newTableRow = 'newTableRow'
        @modifyContent = 'modifyContent'
        @deleteData = 'deleteData'
        @schoolIdChange = 'schoolIdChange'
        @gradeIdChange = 'gradeIdChange'
        @classIdChange = 'classIdChange'
      >
      </condition>）

子组件内容
   <template>
    <div class="filter-container">
       <el-select v-model="schoolValue" placeholder="请选择学校">
            <el-option
            v-for="(item,index) in schoolOptions"
            :key="index"
            :label="item.fullname"
            :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="gradeValue" placeholder="请选择年级" >
            <el-option
            v-for="(item,index) in gradeOptions"
            :key="index"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="classValue" placeholder="请选择班级">
            <el-option
            v-for="(item,index) in classOptions"
            :key="index"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
        <!-- <span class="studentNum">学生数：{{tableData.length}}</span> -->
        <div style="float:right;">
            <el-button style="margin-left:10px; " type="primary" icon="el-icon-plus" @click="_newTableRow">添加</el-button>
            <el-button style="margin-left:10px;" type="primary" icon="el-icon-edit" @click="_modifyContent">修改</el-button>
            <el-button style="margin-left:10px;" type="primary" icon="el-icon-delete" @click="_deleteData">删除</el-button>
            <el-input  placeholder="请输入内容" style="width:200px;margin-left:10px;"></el-input>
            <el-button style="margin-left:10px;" type="primary" icon="el-icon-search">查询</el-button>
    </div>
</div>

</template>
<script>
import { allschoolList, allgradeList,allclassList } from "@/api/organizationAd";

export default {
data() {

return {
  schoolOptions: [],
  gradeOptions: [],
  classOptions: [],
  schoolValue: "",
  gradeValue: "",
  classValue:'',

};

},
mounted() {

//所有学校
allschoolList().then(res => {
  if (res.data.success) {
    this.schoolOptions = res.data.data;
    this.schoolOptions.unshift({
      fullname: "全部",
      id: 0,
      shortname: Date.now()
    });
  }
});
//所有年级
allgradeList().then(res => {
  if (res && res.data.success) {
    console.log(res.data.data);
    this.gradeOptions = res.data.data;
  }
});

},
watch: {

schoolValue(val) {
    //监听选择学校 将改变的学校id传给父组件  
    this.$emit('schoolIdChange',val)
},
gradeValue(val) {
 this.$emit('gradeIdChange',val)
},
classValue(val) {
 this.$emit('classIdChange',val)
},

},
methods: {

  _newTableRow(){
      this.$emit('newTableRow')
  },
  _modifyContent(){
      this.$emit('modifyContent')
  },
  _deleteData(){
      this.$emit('deleteData')
  }

}
};
</script>

上面为代码，比如在不同页面需要用不同条件去筛选内容，如何控制