vue-组件通信

父子组件之间通信的方式

1.父组件(Patent)传递给子组件(Child)

通过props属性传递

2.子组件传递给父组件

通过$emit Events

传值时props可以是数组也可以是对象

1.传值对象————数组

一般不用这种方式

export default {
  props: [
    'title',
    'content',
  ]
}

2.传值对象————对象

这种方式用的人比较多，其中require和default一般只用写一个就可以了

props: {
      title: String,
      content: {
        // 指定类型
        type: Number,
        // 是否为必传值
        require: true,
        // 默认值
        default: 123,
      }
    },

细节一之type的类型可以是那些？

type的类型值:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

细节二之对象类型的其他写法

1.带有默认值的对象

• 正确写法

  props: {
    propA: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return {name: "beichen"}
      }
    },
  },

• 错误写法

  props: {
    propA: {
      type: Object,
      default: {name: "beichen"},
    },
  },

• 二者写法的区别
  当默认值是一个defaule()函数时，在多次调用propA时，default函数会返回三个对象，这时修改单个对象中的name值时不会影响另外两个对象的值
  而当默认值时一个对象时，在多次调用propA时，他们的值都指向同一个地址的name,当修改其中一个对象的name值时，另外两个对象的name值也会跟这修改，会造成数据紊乱。

2.自定义验证函数

props: {
  propB: {
    validator(value) {
      // 这个值必须是匹配下列字符串中的一个
      return ["success", "failed", "beichenzero"].includes(value)
    }
  },
},

这里表示当传过来的值进行一个判断，查看这个值是否是我们定义数组中的其中一个值，如果是则返回这个值，否则返回false就会报一个警告，表示你传的值不是我们期望的值。

细节三之Props的大小写命名的问题

Html中的attribute大小写命名时不敏感的，所以浏览器会把所有大写字符解释为小写字符
这就以为着你在使用DOM中的模板时，camelCase(驼峰命名法)的prop名需要使用其等价的kekab-case(短横线分隔命名)
但是在vue文件中时不需要的，因为在vue中的模板会被vue-loader解析，而vue-loader会帮我们处理好大小写命名的问题。