vue prototype

每一个组件都相当于是Vue的一个实例 所以有时候我们定义数据或者实用工具的时候并不想污染全局 就可以在vue.prototype上进行定义 使得它们在每个组件实例里都可以访问
Vue.prototype.$proName = 'pro_name'

  export default {
    data () {
      return {}
    },
    created () {
       console.log('this.$proName:',this.$proName) // this.$proName:pro_name
    }
  }

至于为什么一定要用$,其实并没有什么特定的规则,只不过是Vue.prototype的一个小约定,也可以用其他符号代替,如Vue.prototype.^proName = 'pro_name'
虽然没有什么特定规则，但不能舍弃不写，不然会和实例里定义的变量发生冲突：

Vue.prototype.proName = 'pro_name'
export default {
  data () {
    return {
      proName: '111'
    }
  },
  created () {
     console.log('prototype-proName:',this.proName) 
     console.log('page-proName:',this.proName) 
  }
}

上面的log会先打印出prototype-proName:pro_name然后出现page-proName:111，因为原型上的proName被实例data里面的proName覆盖掉了
所以用符号也可以称之作用域
值得注意的是一点是 Vue.prototype只是给每个组件加了一个变量 但它并不是全局的

index.vue
<tempalte>
  <div class="page_index">
     <el-button @click="toHomePage">toHomePage Button</el-button>
  </div>
</tempalte>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    toHomePage() {
      this.$proName = "change_pro_name"
      this.$route.push('/home')
    }
  }
}
</script>

home.vue
<script>
export default {
  data () {
    return {}
  },
  created() {
    console.log(this.$proName) // pro_name
  }
}
</script>

标签：Vue,name,proName,pro,vue,prototype,log
来源： https://www.cnblogs.com/kaizhadiyishuai/p/15740452.html