【前端--Vue】组件之间的多种通信方式，一文彻底搞懂组件通信！

已于 2024-05-07 14:21:01 修改
阅读量4.6k 收藏 107
点赞数 95
分类专栏： vue从基础到起飞 文章标签： javascript 前端 AI编程 vue.js 前端框架 vue
于 2024-05-07 14:18:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78542842/article/details/138527180
版权

 本篇将重点讲解vue中的多种组件通信方式，包括【父传子】【子传父】【兄弟组件通信】【依赖注入】等等，并提供具体案例来让小伙伴们加深理解、彻底掌握！喜欢的小伙伴们点赞收藏，持续关注哦~💕

💟 上一篇文章 史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册

📝 系列专栏 vue从基础到起飞

目录

一、组件通信

1.什么是组件通信？

2.组件关系分类

3.通信解决方案

4.父子通信流程

5.父向子通信代码示例

6.子向父通信代码示例

二、详解props

1.Props 定义

2.Props 作用

3.特点

4.代码演示

三、props校验

1.思考

2.作用

3.语法

4.代码演示

四、props校验完整写法

1.语法

2.代码实例

3.注意

五、props & data、单向数据流

1.共同点

2.区别

3.单向数据流：

4.代码演示

5.口诀

六、非父子通信 -- event bus 事件总线

1.作用

2.步骤

3.代码示例

七、非父子通信 -- provide&inject

1.作用

2.场景

3.语法

4.完整实例

5. 总结

一、组件通信

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

  • 组件的数据是独立的，无法直接访问其他组件的数据。

  • 想使用其他组件的数据，就需要组件通信

2.组件关系分类

  1. 父子关系

  2. 非父子关系

3.通信解决方案

4.父子通信流程

  1. 父组件通过 props 将数据传递给子组件

  2. 子组件利用 $emit 通知父组件修改更新

5.父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :title="myTitle"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '前端菜鸟的自我修养',
    }
  },
  components: {
    Son,
  },
}
</script>

<style>
</style>

子组件Son.vue

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    <!-- 3.直接使用props的值 -->
    我是Son组件 {{title}}
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接受
  props:['title']
}
</script>

<style>

</style>

父向子传值步骤

  1. 给子组件以添加属性的方式传值

  2. 子组件内部通过props接收

  3. 模板中直接使用 props接收的值

6.子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

子组件Son.vue

<template>
  <div class="son" style="border: 3px solid #000; margin: 10px">
    我是Son组件 {{ title }}
    <button @click="changeFn">修改title</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  props: ['title'],
  methods: {
    changeFn() {
      // 通过this.$emit() 向父组件发送通知
      this.$emit('changTitle','前端菜鸟的自我修养')
    },
  },
}
</script>

<style>
</style>

 父组件App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 2.父组件对子组件的消息进行监听 -->
    <Son :title="myTitle" @changTitle="handleChange"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端',
    }
  },
  components: {
    Son,
  },
  methods: {
    // 3.提供处理函数，提供逻辑
    handleChange(newTitle) {
      this.myTitle = newTitle
    },
  },
}
</script>

<style>
</style>

子向父传值步骤

  1. $emit触发事件，给父组件发送消息通知

  2. 父组件监听$emit触发的事件

  3. 提供处理函数，在函数的性参中获取传过来的参数

二、详解props

1.Props 定义

组件上 注册的一些 自定义属性

2.Props 作用

向子组件传递数据

3.特点

  1. 可以 传递 任意数量 的prop

  2. 可以 传递 任意类型 的prop

4.代码演示

父组件App.vue

<template>
  <div class="app">
    <UserInfo
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :hobby="hobby"
    ></UserInfo>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>

<style>
</style>

子组件UserInfo.vue

<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名：{{username}}</div>
    <div>年龄：{{age}}</div>
    <div>是否单身：{{isSingle}}</div>
    <div>座驾：{{car.brand}}</div>
    <div>兴趣爱好：{{hobby.join('、')}}</div>
  </div>
</template>

<script>
export default {
  props:['username','age','isSingle','car','hobby']
}
</script>

<style>
.userinfo {
  width: 300px;
  border: 3px solid #000;
  padding: 20px;
}
.userinfo > div {
  margin: 20px 10px;
}
</style>

三、props校验

1.思考

组件的props可以乱传吗？

2.作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

3.语法

  • 类型校验

  • 非空校验

  • 默认值

  • 自定义校验

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseProgress :w="width"></BaseProgress>
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 50,
    }
  },
  components: {
    BaseProgress,
  },
}
</script>

<style>
</style>

子组件 BaseProgress.vue（写了一个简单的进度条组件）

<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    w: Number,
  },
}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

实现了进度条显示50%的进度，效果图如下： 

四、props校验完整写法

1.语法

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ......
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

2.代码实例

  
  <script>
  export default {
    // 完整写法（类型、默认值、非空、自定义校验）
    props: {
      w: {
        type: Number,
        required: true,
        default: 0,
        validator(val) {
          // console.log(val)
          if (val >= 100 || val <= 0) {
            console.error('传入的范围必须是0-100之间')
            return false
          } else {
            return true
          }
        },
      },
    },
  }
  </script>

3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认值。如果是复杂类型的值，则需要以函数的形式return一个默认值

五、props & data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

  • data 的数据是自己的 → 随便改

  • prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

3.单向数据流：

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseCount :count="count" @changeCount="handleChange"></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
    return {
      count:100
    }
  },
  methods:{
    handleChange(newVal){
      // console.log(newVal);
      this.count = newVal
    }
  }
}
</script>

<style>

</style>

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="handleSub">-</button>
    <span>{{ count }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  // data () {
  //   return {
  //     count: 100,
  //   }
  // },
  // 2.外部传过来的数据 不能随便修改
  props: {
    count: {
      type: Number,
    },
  },
  methods: {
    handleSub() {
      this.$emit('changeCount', this.count - 1)
    },
    handleAdd() {
      this.$emit('changeCount', this.count + 1)
    },
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

5.口诀

谁的数据谁负责

六、非父子通信 -- event bus 事件总线

1.作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

2.步骤

  1. 创建一个都能访问的事件总线 （空Vue实例）

      
  import Vue from 'vue'
  const Bus = new Vue()
  export default Bus

  2. A组件（接受方），监听Bus的 $on事件

     
  created () {
    Bus.$on('sendMsg', (msg) => {
      this.msg = msg
    })
  }

  3. B组件（发送方），触发Bus的$emit事件

      
  Bus.$emit('sendMsg', '这是一个消息')

3.代码示例

新建EventBus.js，实例化一个新组件实例并向外暴露，作为兄弟组件传值的媒介

  
  import Vue from 'vue'
  const Bus  =  new Vue()
  export default Bus

BaseA.vue(接收方)

<template>
  <div class="base-a">
    我是A组件（接受方）
    <p>{{msg}}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  data() {
    return {
      msg: '',
    }
  },
  created() {
    Bus.$on('sendMsg', (msg) => {
      // console.log(msg)
      this.msg = msg
    })
  },
}
</script>

<style scoped>
.base-a {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

BaseB.vue(发送方)

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button @click="sendMsgFn">发送消息</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  methods: {
    sendMsgFn() {
      Bus.$emit('sendMsg', '今天天气不错，适合旅游')
    },
  },
}
</script>

<style scoped>
.base-b {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

App.vue

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB>
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'
export default {
  components:{
    BaseA,
    BaseB,
  }
}
</script>

<style>

</style>

七、非父子通信 -- provide&inject

1.作用

跨层级共享数据，不只是父子之间，也可以是祖父与孙子之间，曾祖父与重孙之间......

2.场景

3.语法

  1. 父组件 provide提供数据

  
  export default {
    provide () {
      return {
         // 普通类型【非响应式】
         color: this.color, 
         // 复杂类型【响应式】
         userInfo: this.userInfo, 
      }
    }
  }

2.子/孙组件 inject获取数据

  
  export default {
    inject: ['color','userInfo'],
    created () {
      console.log(this.color, this.userInfo)
    }
  }

4.完整实例

爷组件

<template>
  <div>
    <button @click="changeMsg">祖组件触发</button>
    <h1>祖组件</h1>
    <parent></parent>
  </div>
</template>

<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      developer:'布兰登·艾奇',
      year:1995,
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, // 方式1.传入一个可监听的对象
      developerFn:() => this.developer, // 方式2.通过 computed 来计算注入的值
      year: this.year, // 方式3.直接传值
      app: this, // 方式4. 提供祖先组件的实例 缺点：实例上挂载很多没有必要的东西 比如：props，methods。
    }
  },
  components: {
    parent,
  },
  methods:{
    changeMsg(){
      this.obj.name = 'Vue';
      this.developer = '尤雨溪';
      this.year = 2014;
      this.update = '2021年6月7日';
    },
  },
}
</script>

 父组件

<template>
  <div class="wrap">
    <h4>子组件（只做中转）</h4>
    <child></child>
  </div>
</template>

<script>
import child from './child.vue';
export default {
  components:{
    child,
  },
}
</script>

孙组件

<template>
  <div>
    <h5>孙组件</h5>
    <span>名称：{{obj.name}}</span> |
    <span>作者：{{developer}}</span> |
    <span>诞生于：{{year}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
 
<script>
export default {
  computed:{
    developer(){
      return this.developerFn()
    }
  },
  inject:['obj','developerFn','year','app'],
}
</script>

实现效果如下图

对比一下前后差异：无论点击多少次，孙组件中的诞生于 year 字段永远都是1995 并不会发生变化，通过 方式1、方式2、方式4传值是可以响应的。 

正如官网所提到的：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

另一种情况：在孙组件中修改祖组件传递过来的值（方式1、方式4），发现对应的祖组件中的值也发生了变化：

爷组件

<template>
  <div>
    <h1>祖组件</h1>
    <span>名称：{{obj.name}}</span> |
    <span>最后更新于：{{update}}</span>
    <parent></parent>
  </div>
</template>

<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, 
      app: this,
    }
  },
  components: {
    parent,
  },
}
</script>

父组件不变

孙组件

<template>
  <div>
    <button @click="changeMsg">孙组件触发</button>
    <h3>孙组件</h3>
    <span>名称：{{obj.name}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
 
<script>
export default {
  inject:['obj','app'],
  methods: {
    changeMsg(){
      this.obj.name = 'React';
      this.app.update = '2020年10月';
    }
  },
}
</script>

 

5. 总结

慎用 provide / inject


既然 provide/inject 如此好用，那么，为什么 Vue 官方还要推荐我们使用 Vuex，而不是用原生的 API 呢？


答： 前面提到过，Vuex 和 provide/inject 最大的区别：Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态。

Vue 的设计理念借鉴了 React 中的单向数据流原则（虽然有 sync 这种破坏单向数据流的家伙），而 provide/inject 明显破坏了单向数据流原则。试想，如果有多个后代组件同时依赖于一个祖先组件提供的状态，那么只要有一个组件修改了该状态，那么所有组件都会受到影响。这一方面增加了耦合度，另一方面，使得数据变化不可控。如果在多人协作开发中，这将成为一个噩梦。

在这里，总结了使用 provide/inject 做全局状态管理的原则：

多人协作时，做好作用域隔离；
尽量使用一次性数据作为全局状态

一层嵌套的父子组件可以使用props来传值，props本身就是有相应性的。
根据自身代码选择合适的传值方式，并不一定非要用provide/inject的传值。

🚀 个人简介：6年开发经验，现任职某国企前端负责人，分享前端相关技术与工作常见问题~
💟 作    者：前端菜鸟的自我修养❣️
📝 专    栏：vue从基础到起飞
🌈 若有帮助，还请关注➕点赞➕收藏，不行的话我再努努力💪💪💪

更多专栏订阅推荐：

👍 前端工程搭建
💕 JavaScript深入研究

前端菜鸟的自我修养
关注
  • 95
    点赞
  • 踩
  • 107
    收藏
    觉得还不错? 一键收藏
  • 82
    评论
专栏目录
vue2.0组件之间传值、通信的多种方式(干货)
01-21
Vue中组件这个特性让不少前端er非常喜欢，我自己也是其中之一，它让前端的组件式开发更加合理和简单。这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.$route.query.orderId 二、通过设置 Session Storage缓存的形式
前端html利用http-vue-loader以组件方式引入vue文件
06-15
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件： http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File，无需透过 nodeJS 环境编译，也不需要 ...
vue组件间通信的13种方式
热门推荐
longfan_的博客
06-16 1万+
vue组件间通信的13种方式
VUE组件间通信的七种方式
宝子的博客
11-04 1563
根据以上对这6种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信。
【前端知识之Vue】Vue组件间的通信方式
weixin_44337386的博客
06-20 824
本系列主要整理前端面试中需要掌握的知识点。本节介绍Vue组件间的通信方式。
前端vue组件间通信六种方式（完整版）
qq_44410862的博客
07-10 1711
方法一、props/$emit 父组件home通过props的方式向子组件About传递， 子组件 向 父组件传值 通过在 子组组件中$emit, 父组件 组件中 v-on 的方式实现 一 父组件向子组件传值 接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件About组件中如何获取父组件 home中的数据 users //home.vue父组件 <template> <div id="app"> <About:users="users" >
vue3组件通信方式 二
每天都要努力学习哦~~
06-14 769
parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据父组件可以使用的。但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”，外部不能访问。在父组件内部提供结构：Todo即为子组件,在父组件内部使用的时候，在双标签内部书写结构传递给子组件。//pinia:集中式管理状态容器,可以实现任意组件之间通信！
前端经典面试题 | Vue组件间的通信方式
CoderHing的博客~
11-07 2792
子组件通过 props 来接收父组件传递过来的数据, 父组件在子组件上 注册监听事件,子组件通过 $emit触发事件 向 父组件发送数据.通过ref属性给子组件设置名字,父组件通过$refs=组件名来获取子组件实例,子组件通过$parent获得父组件,这样也可以实现通信.使用provide/inject , 在父组件中 通过 provide提供变量, 子组件中通过inject将变量注入到组件中,不论层级有多深,只要调用了inject 就可以注入 provide中的数据。
2024年前端最新Vue组件之间数据通信12种方式_组件通信，2024年最新面试前端开发十大问题
最新发布
2401_84411522的博客
05-13 695
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
初级前端-组件通讯知识点
weixin_43855512的博客
07-07 267
学习组件通讯
总结了-Vue3-的七种组件通信方式-别再说不会组件通信了.docx
12-18
Vue3 组件通信方式概述 在 Vue3 中，组件通信是指组件之间的数据交换和事件传递。组件通信是 Vue 应用程序中非常重要的一部分，它使得不同的组件能够协同工作，实现复杂的业务逻辑。本文将总结 Vue3 中的七种组件...
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...
vue.js使用v-model实现父子组件间的双向通信示例
10-15
在父子组件通信中，`v-model`扮演的角色有所不同。父组件通过`v-model`传递一个值到子组件，子组件则可以通过监听`input`事件并更新这个值来实现向父组件的通信。以下是对示例代码的详细解释： ```html <!-- 父组件...
前端面试题精选 - 描述一下组件的通信方式
sherly_chen的博客
12-22 645
组件通信分为 2 种：父子组件之间的通信、非父子组件之间的通信； 父子组件通信： 父组件通过props向子组件传值，子组件通过$emit将数据发送给父组件； 非父子组件通信又分为： 兄弟组件、隔代关系组件等； 通信方式一： 通过eventBus（事件总线）实现跨组件传输，原理就是将它作为连接组件之间的桥梁，所有组件共用相同的事件中心，向事件中心发送或接收事件，并可以通知其他组件； =>eventBus使用步骤： 1、初始化，创建一个事件总线并导出，以便其他模块可以使用并监听它； .
Vue.js_30_组件双向绑定案例
魏宇轩
04-27 294
本系列博客汇总在这里：Vue.js 汇总 组件双向绑定案例 源码工程文件为： 注意： 修改后： 最终效果： 效果图 完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> &lt...
前端框架vue：三种组件通信
Lpd_Reason的博客
08-30 423
1.父组件向子组件传输局：利用pros 链接：https://blog.csdn.net/qq_34129336/article/details/79541447 2.子组件向父组件发送数据：事件监听 在父组件 App.vue 中引用子组件 A.vue，把 A中的数据传给App. 子组件 A.vue: &lt;template&gt;  &lt;div&gt;  &lt;h3&gt;这里...
前端组件通信的一点点理解
Arui_0的博客
09-01 352
前话 吾辈同时是 vue/react 的使用者。 在使用现代前端框架时，我们经常要要面对的问题之一就是组件之间的通信，目前我们有着很多选择，包括但不限于以下这些。 Super Component Props : 将状态或操作放在父组件，然后传递到子组件。该特性在 vue/react 都存在 Context/Provider Pattern : 将状态放在父组件，然后所有的子组件都可以获取到。例如 react 中的 context 或 vue 中的 provide/inject Global State :
vue组件之间的通信
CedricD的博客
05-13 161
组件通信 组件通信一般分为以下几种情况： 父子组件通信 兄弟组件通信 任意组件 父子通信 父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件，这两种方式是最常用的父子通信实现办法。 这种父子通信方式也就是典型的单向数据流，父组件通过 props 传递数据，子组件不能直接修改 props， 而是必须通过发送事件的方式告知父组件修改数据。 另外这两种方式还可以使用语法糖 v-model 来直接实现，因为 v-model 默认会解析成名为 value 的 prop 和名为
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
05-01
Vue是一款流行的前端框架，它支持自定义组件，并提供了v-model指令来实现双向数据绑定。同时，Vue也提供了多种方式来实现父子组件之间的同步通信。 对于自定义组件的v-model双向绑定来说，最简单的方法就是在子组件的props中定义一个value属性，并将其绑定到父组件中的data中的属性。然后，子组件中通过$emit('input', value)触发一个input事件来改变父组件的数据。例如： 父组件： ```vue <template> <div> <custom-input v-model="message"></custom-input> </div> </template> <script> import CustomInput from './CustomInput.vue'; export default { components: { CustomInput }, data() { return { message: 'Hello world!' }; } }; </script> ``` 子组件： ```vue <template> <div> <input :value="value" @input="$emit('input', $event.target.value)"> </div> </template> <script> export default { props: { value: { type: String, required: true } } }; </script> ``` 除了上述方式外，还可以通过自定义指令、混入等方式来实现自定义组件的v-model双向绑定。 对于父子组件之间的同步通信，Vue提供了多种方式来实现，例如： 1. props和$emit 在父组件中通过props将数据传递给子组件，在子组件中通过$emit触发一个事件并将数据传递回父组件。例如： 父组件： ```vue <template> <div> <child-component :message="message" @update-message="updateMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello world!' }; }, methods: { updateMessage(value) { this.message = value; } } }; </script> ``` 子组件： ```vue <template> <div> <input :value="message" @input="updateMessage($event.target.value)"> </div> </template> <script> export default { props: { message: { type: String, required: true } }, methods: { updateMessage(value) { this.$emit('update-message', value); } } }; </script> ``` 2. $parent和$children 在父组件中通过$children获取所有子组件，然后通过$parent获取父组件，从而实现父子组件之间的通信。例如： 父组件： ```vue <template> <div> <child-component></child-component> <button @click="sendMessage">Send message to child</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { sendMessage() { this.$children[0].sendMessage('Hello child'); } } }; </script> ``` 子组件： ```vue <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' }; }, methods: { sendMessage(value) { this.message = value; } } }; </script> ``` 除了上述方式外，还可以通过$refs、事件总线、Vuex等方式来实现父子组件之间的同步通信。需要根据具体的场景来选择合适的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 82
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值