Vuejs：如何正確地將prop傳遞到組件數據

Question

我正在使用Vue 2.0，但是還有一些不清楚的地方。我如何將道具傳遞到組件的內部數據？ 查看文檔，看來我做得對。

的HTML

<lista-servizi :servizi="modello"></lista-servizi>

“模型”是已經定義的數據。

VUE組件

Vue.component('lista-servizi', {
 template:
 '<span class="blu">{{listaServizi.lineaGialla.descrizione}}</span>',
    props: ['servizi'],
    data: function(){
    return{
       listaServizi : this.servizi
    }

基本上，我嘗試為數據listaServizi提供與props servizi相同的值，但是在控制台中，我有以下消息：

[Vue warn]: Error in render function: "TypeError: Cannot read property 'descrizione' of undefined"

found in

---> <ListaServizi>
       <Root>

Answer 1

您應該改為使用computed 。

Vue.component('lista-servizi', {
  //...
  computed: {
    listaServizi() {
      return this.servizi
    }
  }
}

Answer 2

您最有可能在modello上遇到問題。 通過定義modello ，您的代碼可以正常工作。 下面是一個基於您的代碼的示例，該示例有效：

<div id="app-1">
<lista-servizi :servizi="modello"></lista-servizi>
</div>



Vue.component('lista-servizi', {
  template: '<span class="blu">{{listaServizi.lineaGialla.descrizione}}</span>',
  props: ['servizi'],
  data: function(){
    return{
     listaServizi : this.servizi
    }
  }
})

var app1 = new Vue({
 el: '#app-1',
 data: {
 modello: { 
  lineaGialla : {
    descrizione : " This is a description"
    }
  }
}
})

這是工作箱https://jsbin.com/qoloqoz/1/edit?html,js,output的鏈接