從父級傳遞數據以在組件上呈現，數據傳遞失敗

Question

我試圖將名字和姓氏傳遞給子組件以呈現為自定義元素。 應該很簡單。 但是由於某種原因，我無法鏈接我的道具。 這是相關的父代碼...

     <div class="panel-body">
            <full-name  :userData.firstname="firstname"
                        :userData.lastname="lastname"></full-name>
     </div>

<script>
    import toggleSwitch from './components/toggleSwitch.vue';

    export default {
        data () {
            return{
                userData: {
                  firstname: '',
                  lastname: ''
                }
            }
        }, 
        components: {
        'fullName': fullName
        }
    }
</script>

如您所見，我調用了元素並將其傳遞給我的兩個數據道具。 到達那里后，我僅通過字符串插值輸出我的數據，並且...什么也沒有顯示。 這是我的輸出組件

<template>
  <div>
    <p>{{firstname}} {{lastname}}</p>
  </div>
</template>

<script>

  export default{
    props: ['firstname', 'lastname']
  }

</script>

我是否缺少明顯的東西？ 提前致謝。

Answer 1

應該是這樣的：

<full-name  :firstname="userData.firstname" :lastname="userData.lastname"></full-name>

句法：

<comp :prop-name='value'></comp>