vue的组件传值

vue的组件传值

父子传值

父传子

传:

子组件标签      属性名=值

收:

props: {
 属性名: {
      type:类型,多个类型    [Object,Array,String],
      default:基本数据类型,直接写
      复杂型数据类型:  ( ) => {return  复杂数据类型}
      validator: (value) => {
         return boolean值
            true:验证通过
            false:验证失败
      }
  }
     单向数据流: 栈不可修改,堆随便改
              基本数据类型不可修改,
              复杂数据类型,只要不修改它的引用地址(栈),它的值随便修改
}

子传父 (子触发父方法)

​ 绑定:

子组件标签    @子组件方法名="父组件方法"

​ 触发:

​ 子组件内触发:

 this.$emit('子组件方法名', 参数值)

兄弟组件传值

1. Vue.prototype.$bus=new Vue()
   

2. 监听

   this.$bus.$on('方法名',(参数值) => {...})
   

3. 触发

   this.$bus.$emit('方法名',实参值)
   

4. 销毁

   this.$bus.$off('方法名')
   

特点:

bus的监听会累加,bus的监听不使用时要销毁, beforeDestroy销毁处理

v-model

​ 子组件标签

 :value="父组件属性"    @input="父组件属性=$event"

​ 子组件标签

    v-model="父组件属性"

​ 子组件内:

props: ['value']
model: {
    prop: 'value',
    event: 'input'
}
触发: this.$emit('input',实参值)

.sync修饰符

​ 子组件标签

:属性名="父组件属性"   @update:属性名="父组件属性=$event"

​ 子组件标签

:属性名.sycn="父组件属性"

​ 子组件内:

props:['属性名']
触发: this.$emit('@update:属性名',实参值)