javascript - 从父级传递数据以在组件上渲染，数据传递失败

Question

我试图将名字和姓氏传递给子组件以呈现为自定义元素。应该很简单。但由于某种原因我无法连接我的 Prop 。这是相关的父代码...

     <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>

如您所见，我调用该元素并向其传递我的两个数据 Prop 。一旦到达那里，我只需通过字符串插值输出我的数据，然后......什么也没有显示。这是我的输出组件

<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>