封装的时候一定要把methods里的方法传进去 Property or method “back“ is not defined on the instance...

先说结论，封装一个头部标签detail-header，没有传点击事件里的back方法。好家伙下面的图都不给我加载了，最后把back方法加上恢复正常

报错信息

[Vue warn]: Property or method "back" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

 解决过程

1.首先在将封装好的头部引入main.js后，打开网页测试发现下面的图片不加载了，并且报下图错误。

2.去掉封装好的引入，结果报下图错误，但是图片照常显示

3.最后找到back ，去掉标签中的back图片加载恢复正常，报错消失，于是确定问题为没有封装back的方法

4.最后在封装的组件里添加back与back的方法，所有功能恢复正常，bug修复完毕，以下是修复后的代码

<template>
    <div v-title class="detail-header" >
      <i @click="back" class="iconfont">-</i>
      <span>{{name}}</span>
    </div>
</template>

<script>
export default {
  props: ['name'],
  methods: {
    back () {
      // 编程式导航跳转
      this.$router.push('/')
    }
  }
}
</script>

<style scoped lang="scss">
.detail-header{
    transition: all .5s ease;
    text-align: center;
    position: fixed;
    width:100%;
    background: #fff;
    height: .88rem;
    z-index: 10;
    line-height: .88rem;
    i{
      position: absolute;
      left: 10px;
    }
  }
</style>