Vue05/Vue组件子传父、props校验、Vue父子组件传值总结

一.Vue组件子传父

1.子组件通过 触发事件的同时 向父组件传参

this.$emit(' 组件标签内自定义属性名 ',参数1, 参数2 )

2. 父组件给子组件 在组件标签名内注册一个自定义属性名

注意: 父组件中的事件名要与子组件$emit内属性名一致

<子组件  @$emit内属性名="methods内函数名"> </子组件>

3.接收子组件传递参数

methods: {
  自定义函数名(自定义参数名) {
    console.log(参数名)
  }
},

二. Vue父子组件传值总结

1.父组件传子组件 : 使用props

• 单向数据流

2.子组件传父组件: 使用$emit

• 事件监听

三.Props 校验

语法：

export default {
  // props 类型校验
  props: {
    // 要接受的数据: 配置对象
    父组件传递子组件属性名: {
      // 必选项, 必须传过来
      required: true,
      // 类型, 首字母大写
      type: String
    },
    父组件传递子组件属性名: {
      // 必选项, 必须传过来
      required: true,
      // 类型, 首字母大写
      type: Number
    },
    父组件传递子组件属性名: {
      // 必选项, 必须传过来
      // required: true,
      // 类型, 首字母大写
      type: String,
      // 设置默认值, 一般情况下和 required 不会一起设置
      default: '非常好吃!我是默认值'
    }
  },
  data() {
    return {
      
    };
  },
}

说明:

1.props是父传子 ，传递给子组件的数据 为了提高 子组件被使用时 的稳定性 可以进行props校验 ，验证传递的数据是否符合要求

2.如果验证有一个需求没有被满足 则Vue会在浏览器控制台中报错警告你 

注意:

1.默认的 props:['','',''] 不会进行校验 如果希望校验 需要提供对象形式 props

2. 一定要和 data同级

效验方案:

required: 布尔值 必选项: 为true必须传 ,false则不

type: 数据类型    注意：首字母大写

default: ' 默认值'  

注意: default 和 required 不要一起设置