Uncaught RangeError: Maximum call stack size exceeded

[sjq597]

Chrome报错信息:

Uncaught RangeError: Maximum call stack size exceeded
    at VueComponent.Vue._render (eval at <anonymous> (app.js:723), <anonymous>:3906:7)
    at VueComponent.updateComponent (eval at <anonymous> (app.js:723), <anonymous>:2440:21)
    at Watcher.get (eval at <anonymous> (app.js:723), <anonymous>:2779:25)
    at new Watcher (eval at <anonymous> (app.js:723), <anonymous>:2762:12)
    at mountComponent (eval at <anonymous> (app.js:723), <anonymous>:2444:17)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:7572:10)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:9671:16)
    at init (eval at <anonymous> (app.js:723), <anonymous>:3359:13)
    at createComponent (eval at <anonymous> (app.js:723), <anonymous>:4902:9)
    at createElm (eval at <anonymous> (app.js:723), <anonymous>:4845:9)

请问一下楼主,这个组件要怎么在vue里面用啊,我用vue-cli初始化一个项目,然后新写了一个组件SplitPane.vue:

<template>
  <div>
    <h1>{{ msg }}</h1>
    <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        B
      </template>
    </split-pane>
  </div>
</template>

<script>
export default {
  name: 'splitPane',
  data() {
    return {
      msg: 'Split Pane Demo!'
    }
  },
  methods: {
    resize() {
      console.log('resize')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

然后在main.js里面全局注册组件:

import VueSplitPane from 'vue-splitpane'
Vue.use(VueSplitPane);

路由配置:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import SplitPane from '@/components/SplitPane'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }, {
      path: '/resize',
      name: 'SplitPane',
      component: SplitPane
    }

  ]
})

然后是App.vue:

<template>
  <div id="app">
    <p>导航:
      <router-link to="/">首页</router-link>
      <router-link to="/resize">Spit页面</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

结果就报错,不知道什么情况

本机环境:

Node: v6.9.4
"vue": "^2.3.3",
"vue-router": "^2.3.1"
"vue-splitpane": "^1.0.0",

真心请教楼主,本人新手,非前端,只是项目中恰好需要这么一个东西,所以想请假一下

[PanJiaChen]

全局注册是这样的

 #import
import splitPane from 'vue-splitpane'

# use as global component
Vue.component('split-pane', VueSplitPane)

[sjq597]

十分感谢,看来是我基本功还差的远了