Vue.js 将数据从组件发送到组件

为什么它最终会输出一个空数组？我尝试了所有版本

Main.vue

从“./List.vue”导入列表
导出默认值{
数据（）{
返回{
信息：{}
}
},
组成部分：{
列表
},
创建（）{
this.info={'first'：'1'}
}

当“console.log”应显示{'first'：'1'时的文件

List.vue

导出默认值{
数据（）{
返回{}
},
道具：['info']，
创建（）{
console.log（this.info）
}

如果你使用这样的方法，反应性就会丧失。这里有一个观察者的解决方案，应该可以起作用。你可以观察你的道具是否有变化，然后将输出字符串化

<template>
  <List :info="info"></List>
</template>

<script>
   import List from './List.vue'
   export default{
       data(){
          return {
              info: {}
          }
       },
       components: {
          List
       },
       created(){
          this.info = {'first': '1'}
       }
</script>

---

如果你使用这样的方法，反应性就会丧失。你可以在你的组件中实现一个观察者，在你的道具发生变化时进行观察，然后对它进行字符串化。这里面绝对没有任何东西会产生一个空数组。根本没有数组。根本无法复制它~。在小提琴中，你可以看到

{“info”：{“first”：“1”}

已记录

export default{
   data(){
      return {}
   },
   props: ['info'],
   watch: {
      info: {
         handler(val) {
            console.log(JSON.stringify(val))
         },
         deep: true
      }
      
   }
}