从父级传递数据以在组件上呈现，数据传递失败

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>