访问单页组件中的属性 - VueJS 2.x答案

【问题标题】：Accessing Properties in Single Page Components - VueJS 2.x访问单页组件中的属性 - VueJS 2.x
【发布时间】：2017-02-19 10:43:03
【问题描述】：

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

<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 来创建我包含在我的 html 中的 build.js：

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

但我得到了

我做错了什么？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

如果是属性，则无需在data() 中声明属性。你应该试试：

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

【讨论】：

【解决方案2】：

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

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

我无法从实际属性中获取值。答案不完整。

【讨论】：