标签：自定义 在子 之间 通信 类型 props 组件 默认值

在vue开发中,组件通信尤为重要,特别是父子之间的组件通信

一、父组件传递给子组件

把父组件的信息,数据传给子组件,在子组件上面展示,这时候需要props即可完成二者之间的通信

怎么做呢?

在servlet中,我们把数据存在request域,session域,然后通过setAttribute方法来设置属性,把数据存在域中,拿数据的时候,我们通过getAttribute方法,传入名称,把数据拿出来

props也类似,它相当于你自定义的attribute(属性),在父组件中给这些attribute赋值,在子组件中通过名称拿出来

props有两种用法:

1.字符串数组:里面的字符串就是设置的attribute
2.对象类型:里面不仅可以设置它传递的数据类型,还能设置它的默认值(default);是否为必传(required:true)等...

使用步骤

父组件

1.导入,注册,使用子组件
2.在使用的标签中赋予要传递的数据.动态绑定props :属性名=要传递的数据

子组件

3.props来接收父组件的数据,可以为数组型或对象型

4.使用插值语法展示数据

注意:不能在子组件修改接收的数据

props对象类型写法

 props: {
    // 基础类型检查
    //（给出 `null` 和 `undefined` 值则会跳过任何类型检查）
    propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必传，且为 String 类型
    propC: {
      type: String,
      required: true
    },
    // Number 类型的默认值
    propD: {
      type: Number,
      default: 100
    },
    // 对象类型的默认值
    propE: {
      type: Object,
      // 对象或者数组应当用工厂函数返回。
      // 工厂函数会收到组件所接收的原始 props
      // 作为参数
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // 自定义类型校验函数
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 函数类型的默认值
    propG: {
      type: Function,
      // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
      default() {
        return 'Default function'
      }
    }
  }

 

修改传入的值

1.父组件中:在data里新定义一个局部属性,在props获取初始值即可

2.子组件中:对传入的props值做进一步的转换,最好是基于该 prop 值定义一个计算属性

 

二、子组件向父组件传递事件

步骤

子组件

1.自定义事件
2.使用this.$emit(事件名[,参数列表]) 发出事件

父组件

3.导入,注册,使用子组件

4.在子组件标签绑定自定义事件 @事件名=''

注意:还可以使用this.$emit(事件名,参数)传递参数给父组件

 

标签：自定义,在子,之间,通信,类型,props,组件,默认值
From： https://www.cnblogs.com/pilpill/p/16864949.html