Vue.js属性/方法未定义报错及Vue2静态传Prop异常问题咨询

Hey there, let's break down these two Vue.js issues you're facing—they're super common once you start working with component reactivity and props, so you're definitely not alone!

1. 报错：实例上未定义属性或方法"blah"，但在渲染时被引用 #

This error pops up when your template tries to use a variable (like {{ blah }} or v-if="blah") that your Vue instance doesn't know about. Vue requires all reactive properties to be explicitly declared upfront so it can set up reactivity tracking for them.

常见原因&解决方法： #

• 你忘了在data里声明属性：如果blah是组件内部的状态，一定要把它放在data里（注意Vue 2中data必须是返回对象的函数）：

  export default {
    data() {
      return {
        blah: '' // 初始化值，哪怕是空的也行
      }
    }
  }
  

• blah应该是一个Prop，但你没在props里声明：如果这个值是从父组件传过来的，要在组件的props选项里定义它：

  export default {
    props: ['blah'] // 或者用对象形式做类型验证：props: { blah: String }
  }
  

• 类式组件中未初始化属性：如果你用Vue Class Component，记得用@Prop装饰器或者在data里初始化：

  import { Vue, Prop } from 'vue-property-decorator'
  
  export default class MyComponent extends Vue {
    @Prop() private blah!: string
    // 或者内部状态：
    private blah = ''
  }
  

2. Vue 2中父模板已静态定义Prop，仍抛出"embedded未定义"的报错？ #

First, let's quote the exact error you're seeing:

Property or method "embedded" is not defined on the instance but referenced during render。请确保该属性为响应式，可通过在data选项中声明或在类式组件中初始化该属性解决。

You mentioned this only happens when you import your JavaScript code instead of writing it directly in the .vue file's <script> tag—this is a big clue!

核心原因： #

When you extract your component logic to an external .js file and import it, there's a high chance your component options (like props or data) aren't matching what you had in the inline <script>. For example:

• You might have forgotten to include props: ['embedded'] in the external script (but had it in the inline version)
• The data function in the external script is incorrectly written (e.g., you used an object instead of a function returning an object, which breaks reactivity and can lead to missing properties)
• There's a typo in the external script (like misspelling embedded as embeded)

解决步骤： #

1. 对比内联<script>和外部.js代码：确保props和data部分完全一致。比如你能正常运行的内联代码是这样：

   export default {
     props: ['embedded'],
     data() {
       return { /* 其他状态 */ }
     }
   }
   

   那外部脚本必须包含完全相同的props声明。
2. 确认Vue 2中data是函数形式：绝对不要写data: { embedded: false }——必须是返回对象的函数，否则会导致组件实例共享状态，还可能出现属性缺失的问题。
3. 检查拼写错误或遗漏的选项：仔细核对embedded在模板、props/data声明、父组件传值中的拼写是否一致。

把这些差异修正后，报错就会像内联<script>时一样消失啦！

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