父子组件传值相关知识（回显在同一页面，非同一文件）

最新推荐文章于 2022-06-02 15:41:38 发布

原创

最新推荐文章于 2022-06-02 15:41:38 发布 · 502 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了Vue.js中父子组件的交互方式，包括props用于父组件向子组件传递数据，$emit事件机制让子组件向父组件发送消息。此外，还讲解了如何默认选中子组件的第一个数据以及在弹出框场景下进行数据传递的应用。

props介绍

props: 用于传参，类似与data() 下的 return;
props: 也存在默认值，只不过比return 要复杂一些，需要自己指定类型。如使用类型不正确则控制台就会报错。
例：
  props: {
   
   
    demoString: {
   
   
      type: String,
      default: ''
    },
    demoNumber: {
   
   
      type: Number,
      default: 0
    },
    demoBoolean: {
   
   
      type: Boolean,
      default: true
    },
    demoArray: {
   
   
      type: Array,
      default: () => []
    },
    demoObject: {
   
   
      type: Object,