CSHTML视图向Vue.js应用及组件传值后值为null，求问题排查

核心问题1：根实例的modelValue未传递给schoolsSearchApp组件 #

你在根Vue实例中成功获取到了data-model-value的值，但渲染schoolsSearchApp组件时，没有将这个值传递给它。schoolsSearchApp自身data里的modelValue默认是null，导致子组件School-Card拿到的也是null。

核心问题2：子组件School-Card的props写法错误 #

当前的props定义不符合Vue规范，passedValue没有被正确纳入props的定义范围内。

具体修复步骤 #

1. 修改根Vue实例，传递值给schoolsSearchApp

根实例渲染组件时，通过props将modelValue传入schoolsSearchApp：

new Vue({
    el: '#schoolsSearch',
    data: {
        modelValue: document.getElementById('schoolsSearch').getAttribute('data-model-value').toString()
    },
    render: h => h(schoolsSearchApp, {
        props: {
            modelValue: this.modelValue
        }
    })
});

2. 修改schoolsSearchApp组件，接收根实例传递的modelValue

将组件内data中的modelValue改为通过props接收（若无需在组件内修改该值，可直接省略data里的定义）：

// schoolsSearchApp组件代码
props: {
    modelValue: {
        type: String,
        required: true
    }
}
// 若无需修改该值，删除原data中的modelValue定义

3. 修复School-Card组件的props写法

将passedValue正确定义在props对象内：

// School-Card组件代码
props: {
    school: {
        type: Object, // 根据实际数据类型调整
        required: true
    },
    passedValue: {
        type: String,
        required: true
    }
}

4. 模板绑定规范优化（可选）

模板中的:passedvalue可改为:passed-value，与驼峰式的passedValue对应，Vue会自动处理大小写转换，代码更符合规范：

<School-Card  
    v-for="school in limitedItems" 
    :passed-value="modelValue"  
    :key="school.DisplayName" 
    :school="school"
></School-Card>

修改完成后，modelValue就能从CSHTML视图顺利传递到根Vue实例，再流转到schoolsSearchApp，最终传递给School-Card组件渲染展示。

内容的提问来源于stack exchange，提问作者DarkW1nter