vue组件传值，父子组件双向绑定的使用

目录

vue组件传值

父子组件之间的双向绑定 

---

vue组件传值

父子传值
    父传子
       传   子组件标签   属性名=值
       收   props:{
           属性名:{
               type:类型，多个类型  [Object,Array,String],
               default:基本数据类型，直接写
                       复杂数据类型：()=>{return 复杂数据类型}
               required:true, // 必填
               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"
   子组件标签  :属性名.sync="父组件属性"
   子组件内
     props:['属性名']
     触发：this.$emit('@update:属性名',实参值)

父子组件之间的双向绑定 

父子组件双向绑定
  子组件标签   :value="父组件属性"  @input="父组件属性=$event"      
  子组件标签   v-model="父组件属性"   
  子组件内：
     props:['value'],
     model:{
         prop:'传入的属性名,默认是value',
         event:'绑定的事件名，默认是input'
     },
     单向数据流：栈不可修改，堆可以修改
               基本数据类型不可修改，复杂数据类型，只要不改变它的引用地址（栈），它的值随便修改
      this.$emit('input',实参值) 
      
      
1:子组件标签上  :value="父组件属性"   @input="父组件属性=$event"
   子组件标签上  v-model="父组件属性"  
2:子组件内
   props:['value'],
   修改value
    this.$emit('input',修改后的值)
  不使用value和input
  model:{
      prop:'value',
      event:'input'
  }

 第一种写法是：

在父组件里面的子组件标签

<template>
  <div>
    首页
    <h3>使用全局组件v-model 第一种方式</h3>
    <h2>{{ fatherNum }}</h2>
    <!-- <HmNum :value="fatherNum" @input="fatherNum = $event" /> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      fatherNum: 1
    }
  },
  created() {},
  methods: {}
}
</script>

<style></style>

然后在子组件接受

<template>
  <div>
    <button @click="btn(-1)">-</button>
    <input type="text" :value="value"><button @click="btn(1)">+</button>
  </div>
</template>

<script>
export default {
  name: 'HmNum',
  // 这是第一种
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    btn(a) {
      this.$emit('input', this.value + a)
    }
  }
}
</script>

<style></style>

 以上这种方式实现的父子组件的v-model通信，虽可行，但限制了我们必须popos接收的属性名为value和emit触发的必须为input，这样就容易有冲突，特别是在表单里面。所以，
为了更优雅的使用v-model通信而解决冲突的问题，我们可以通过在子组件中使用model选项，

下面演示写法2：

在父组件里面的子组件标签

<template>
  <div>
    首页
    <h3>使用全局组件v-model 第一种方式</h3>
    <h2>{{ fatherNum }}</h2>
    <HmNum v-model="fatherNum" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      fatherNum: 1
    }
  },
  created() {},
  methods: {}
}
</script>

<style></style>

然后在子组件接受 

<template>
  <div>
    <button @click="btn(-1)">-</button>
    <input type="text" :value="aaa"><button @click="btn(1)">+</button>
  </div>
</template>

<script>
export default {
  name: 'HmNum',
  // 这是第一二种
  model: {
    // 这个是属性值
    prop: 'aaa',
    // 这个是绑定的事件名
    event: 'xxx'
  },
  props: {
    aaa: {
      type: Number,
      default: 1
    }
  },
  methods: {
    btn(a) {
      this.$emit('xxx', this.aaa + a)
    }
  }
}
</script>

<style></style>

注意：

第二种方式还有的好处是减少了父组件的代码，在自己组件里面就把事件，和值都写了

兄弟组件之间传值的话，最后一定要销毁，不然的话会造成 累计加！