一起来学习Vue的组件间通信方式

props

父组件可以通过props向下传递数据给子组件

静态的Props

通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的

动态Props

在模版中要动态的绑定父组件的数据到子模版的props，与绑定任何普通的HTML特性相类似，用v-bind，每当父组件的数据发生变化的时候，该变化会传导给子组件

props验证

可以为组件的props指定验证规则，如果传入的数据不符合规则，Vue会发出警告

props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    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 value > 10
      }
    }
  }

type 可以是(String,Number,Boolean,Function,Object,Array,Symbol)原生构造器

type也可以是自定义构造函数，使用instenceof检测

prop是当先绑定的，当父组件的属性变化是，将传导给子组件，但是不会反过来，这是为了防止子组件无意修改了父组件的状态。

修改prop数据

• prop 作为初始值传入后，子组件想把他当作局部数据来用
• prop 作为初始值传入，有子组件处理成其他数据输出
• 注意：js中对象和数组是引用类型，指向同一个内存空间，如果prop是一个对象或数组，在子组件内部改变它会影响父组件的状态
  • 处理方法1：这个时候需要定义一个局部变量，并用prop初始化它，但是局部变量只能接受prop初始值，当父组件的值发生变化的时候，无法接收到最新值
  • 处理方法2：定义一个计算属性，处理prop值并返回
  • 初始方法3：使用变量存储prop的初始值，并使用watch来观察prop的值的变化，当发生变化的时候更新变量的值

$emit

$emit(‘自定义时间名’,要传送的数据)触发当前实例上的事件

父组件