组件之间的通信

在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里新定义一个新的局部属性,通过this.props里面的值,将值赋给新的属性,再调用新的属性

利用的是prop接收到的数据的优先级比data里的数据优先级高

//得到数据  
props: {
     num(){
      type:Number
     }
   },
//定义新属性
   data() {
     return {
       NewNum:this.num
     }
   },
//使用新属性,可以修改

 <h3>年龄{{NewNum+1}}</h3>

 

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

步骤

子组件

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

父组件

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

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

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