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

最新推荐文章于 2025-09-04 16:14:49 发布

原创最新推荐文章于 2025-09-04 16:14:49 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#git #前端 #http

本文详细介绍了Vue.js中父子组件及兄弟组件之间的数据传递方法，包括父传子、子传父、v-model的使用及.sync修饰符等，并提供了具体实例。

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>

注意：

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

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