Vue.js 访问单页组件中的属性-VueJS 2.x

我试图访问传递给单个文件组件的两个属性，如下所示：

<template>
  <div>{{ width }} - {{ height }}</div>
</template>

<script>
  export default {
    data() {
      return { 
        width: this.width,
        height: this.height
      }
    },
    props: ['width','height']
  }
</script>

HTML文件：

<div id="app">
    <barchart :width="20" :height="20"></barchart>
</div>

但是我得到了

 - 

---

我做错了什么？

如果属性是属性，则不需要在数据中声明属性。你应该试试：

<script>
  export default {
    props: ['width','height']
  }
</script>

---

我尝试了下面的方法，但在某种程度上它仍然是静态的

var e = new Vue({
  el: '#app',
  render: function(createElement){
    return createElement(barchart,{
        props:{
            width: 20,
            height: 20
        }
    })
  }
})

我无法理解它如何从实际属性中获取给定的值。答案是不完整的

<script>
  export default {
    props: ['width','height']
  }
</script>

var e = new Vue({
  el: '#app',
  render: function(createElement){
    return createElement(barchart,{
        props:{
            width: 20,
            height: 20
        }
    })
  }
})