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一起创建我在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

但我得到了

我做错了什么？

Answer 1

如果它们是属性，则无需在console.log("Setting to `undefined`"); var a = ["a", "b", "c", "d", "e"]; console.log(a.length); // 5 a[0] = undefined; console.log(a.length); // still 5 console.log(a[0]); // undefined console.log("0" in a); // true console.log(a.hasOwnProperty(0)); // true中声明属性。你应该试试：

data()

Answer 2

我尝试了以下内容并且有效但在某种程度上它仍然是静态的。

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

如何从实际属性中获取的值超出我的范围。答案是不完整的。

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

2 个答案: