如何将数据从app发送到java_Vuejs如何使用props将数据从main.js传递到App.vue

我遇到的问题是App组件和HelloWorld组件没有从main.js传递数据 . 在Vue中这应该是一件相当简单的事情 .

您可以在图像中看到根元素已将计数器定义为10，它只是没有填充在任何子组件中 . 几乎像main.js中的第12行没有任何效果 . 如果我点击它，它会显示'counter：undefined' . 我究竟做错了什么？我一直在墙上撞了几个小时 .

这是我的main.js

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

new Vue({

components: {App},

data: {

counter: 10

},

template: '',

//computed: {

// counterInc: function () {

// return this.counter++

// }

//},

methods: {

updateCounter (x) {

this.counter = x

}

},

render: h => h(App)

}).$mount('#app')

这是我的App.vue

import HelloWorld from './components/HelloWorld.vue'

export default {

name: 'app',

props: ['counter'] ,

components: {

HelloWorld

},

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

这是我的helloworld.vue

{{ msg }}

Here lies all of our operations for automating some strenuous tasks.

Get Started {{ counter }}

• Generate Purchase Price

export default {

name: 'HelloWorld',

props: {

msg: String,

counter: String,

}

}

h3 {

margin: 40px 0 0;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #0093D0;

}

.generateRollup:hover {

cursor: pointer;

}