访问属性 - VueJS 2.X

Question

我试图访问两个属性我传递到单个文件组件象下面这样：

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

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

这里是我用的main.js文件与browserify/vueify创建build.js，我包括在我的HTML：

var Vue = require('Vue') 
var barchart = require('./components/barchart.vue') 
var d3 = require('d3') 

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

HTML文件：

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

我应该得到类似的输出：

20 - 20 

而是我得到

- 

我在做什么错？

Answer 1

如果属性为data()，则不需要声明属性。你应该尝试：

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

Answer 2

我尝试了以下，它的工作，但它仍然是静态的方式。

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

如何从实际属性给出的值超出了我。答案是不完整的。