vue子父组件通信和函数调用

父组件传递数据给子组件
1.父组件要传递的数据当成有个属性绑定在 组件 上，如下：

<alarm-popup  :data="detail.data" ></alarm-popup>

2.子组件用props接收父组件的传值，如下：

props:['data']

props接收值还有验证形式

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

子组件传递数据给父组件
子组件要用到 vm.$emit( event, arg ) 触发组件上的自定义事件

1.父组件要在组件上绑定自定义事件，如下：

<alarm-popup  @preItem="preItem" @nextItem="nextItem"></alarm-popup>

/**
 * 子组件要触发的自定义函数
 * data 接收来自子组件的传值
*/
preItem(data){
			
},

2.子组件要触发组件的事件

/**
 * 子组件触发组件自定义事件
 *  preItem 自定义事件名
 * data 要传的数据
*/
this.$emit("preItem","data")

父组件调用子组件方法
1.父组件要设置ref属性，如下：

<alarm-popup ref="alarmPopup" ></alarm-popup>

/**
 * contentShow 子组件定义的函数
 * ind 根据需要传递的参数
*/
this.$refs.alarmPopup.contentShow(ind)

2.子组件要定义被调用的函数

contentShow(ind){

}

子组件调用父组件方法
第一种：就是用上面 子组件传递数据给父组件 的形式
第二种：子组件用 this.$parent.fatherMethod(); 调用父组件方法