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>

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

1 个答案: