Vue组件传入Prop未定义报错及渲染异常问题排查

咱们一步一步来拆解你遇到的两个问题：

1. 为什么会抛出「ReferenceError: myvar is not defined」？ #

你用了jQuery的$(function() {})来包裹Vue的初始化逻辑，这会导致Vue的组件注册和实例化延迟到DOM加载完成后才执行。但浏览器在解析页面时，会先读到<my-component>里的模板内容（带v-if="myvar"的部分），此时Vue还没初始化，这部分模板会被当作普通HTML处理，而myvar在全局作用域里根本不存在，所以直接抛出了引用错误。

就算你移除了jQuery的包装，Vue初始化提前了，第二个问题依然存在——这就涉及到Vue**内联模板（inline-component）**的作用域规则了。

2. 移除jQuery后不报错但不渲染内容的原因 #

当你给组件加上inline-component属性时，Vue会把组件标签内部的内容当作组件的模板，但这里有个容易踩坑的点：内联模板的作用域是父组件，而不是子组件本身。

你的子组件虽然声明了props: ['myvar']，但内联模板里的myvar是去父Vue实例（也就是#app对应的实例）里找的，而父实例里根本没有定义myvar这个数据，所以myvar是undefined，自然不会渲染出"Yes"。

修复方案 #

根据你的需求，有两种常用的修复方式：

方式一：移除内联模板，把模板放到子组件内部 #

这种方式更符合Vue组件的常规写法，组件的逻辑和模板封装在一起：

<div id="app">
  <my-component :myvar="1"></my-component>
</div>

Vue.component('my-component', {
  props: ['myvar'],
  template: `
    <h1 v-if="myvar == 1">Yes</h1>
    <h1 v-if="myvar == 2">No</h1>
  `
})

new Vue({
  el: '#app'
});

方式二：使用作用域插槽传递子组件的props #

如果你确实需要在父组件里写子组件的模板内容，可以用作用域插槽来获取子组件的props：

<div id="app">
  <my-component :myvar="1">
    <!-- 通过作用域插槽接收子组件传递的props -->
    <template v-slot:default="slotProps">
      <h1 v-if="slotProps.myvar == 1">Yes</h1>
      <h1 v-if="slotProps.myvar == 2">No</h1>
    </template>
  </my-component>
</div>

Vue.component('my-component', {
  props: ['myvar'],
  // 子组件通过slot把props传递给父级的插槽内容
  template: '<slot :myvar="myvar"></slot>'
})

new Vue({
  el: '#app'
});

两种方式都能解决你的问题，你可以根据实际场景选择合适的方案~

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