vue实现子组件和父组件之间的组件通信问题

最新推荐文章于 2024-07-20 16:46:53 发布
最新推荐文章于 2024-07-20 16:46:53 发布
阅读量504 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rossbort/article/details/120339689
版权

组件的概念就不再多说了

那什么是子父组件呢？

         父子组件是一个相对概念
A组件使用了B组件 那么 A 就是B的父组件 B就是A的子组件
B组件使用了A组件 那么 B 就是A的父组件 A就是B的子组件

子父组件如何实现通信问题？

简单来说就是两句话（还有多种方法这里就不写l）：

父传子  其实就是通过自定义属性  子组件通过props接收
子传父  其实就是通过自定义事件  子组件通过$emit触发父组件定义的事件 并且把子组件的数据
        通过参数的方式给了父组件；

那么下面拿案例来说明：

要求：现要实现一个动态投票组件，点击支持，支持人数加一，总人数加1；点击反对，反对人数加一，总人数加一；支持率动态变化 支持率 = 支持人数/总人数 

实现原理：基于props属性传递

        1.父组件调用到的时候，可以使用自定义属性传值：

        自定义属性传递的属性值默认都是字符串，如果需要传递其它数据类型值，
     我们需要基于v-bind处理 => :supnum="10" 这样传递过去的就是Number类型，就是前面加个：

<my-component aa='zhufeng' :bb='xxx'></my-component>

         2.子组件中基于props声明需要接收的属性值：

Vue.component('my-component',{

props:['aa','bb'],

...

})

 使用props需要注意：

  • props中声明的属性和data一样，是响应式数据，挂载到vm实例上，可控制视图渲染

  • props中的一些细节问题

    • 命名大小写：传递的是kebab-case格式，props中获取的是camelCase驼峰命名

    • 指定属性的类型：props:{xxx:String,…}

    • 指定属性的默认值：props:{xxx:{type:String,default:’xxx’,required:true}}

      • type如果是一个数组，意为指定的多类型皆可以

      • default可以是一个函数，函数返回值是默认值

      • validator自定义验证规则函数：必须符合函数中指定的规则，返回true/false

    • 传递的属性值默认都是字符串格式，如果想要让传递的值是数字、布尔、数组、对象等格式，我们需要使用v-bind处理

    • 在组件上添加样式和class自动合并问题

 案例效果图：

具体代码实现：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
	<title>title</title>
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="css/reset.min.css">
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/b
最低0.47元/天 解锁文章
艺术就是派大星220
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件通信——父子组件通信的四种方法
weixin_44001906的博客
07-13 1万+
引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)，第二个参数：引入的组件名（一般都与组件名保持一致） 之后就可以全局使用组件了 局部引入 在父组件中引入 import ChildrenDemo from '@/views/components/Ch
vue父子组件通信，兄弟组件通信
qq_55928824的博客
03-05 2394
父子组件通信，兄弟组件通信
VUE 父子组件、兄弟组件 之间通信 最强详解
不想成为可以改变世界的程序员，不是一个好程序员
05-31 7512
简单 总结： 1.1 通过 ref 调用/获取 子组件内参数/方法 实现：就是在 你想要访问的组件上 通过 ref 注册引用信息，然后依靠 this.$refs 调用 组件内的方法以及参数。 2.1 通过emit 调用 父组件方法 实现：将 要在子组件中想调用的父组件方法，通过【@】配置至组件上，然后通过this.$emit()来调用。 2.2 通过 props 调用 父组件方法/参数 实现：将 要在子组件中想调用的父组件方法/父组件参数，通过 【:】配置至组件上，接着在子组件的prop .....
【Vue】父组件子组件的通信方式20种（全网最全总结）
慕白Lee的博客
07-11 8858
目录Props：父组件向子组件传递数据，子组件通过props属性接收数据父组件：子组件：$emit和$on：子组件向父组件传递数据，子组件通过$emit触发事件，父组件通过$on监听事件并接收数据。父组件：子组件：$parent和$children：父组件向子组件传递数据，父组件通过$children获取子组件实例并调用子组件方法传递数据。父组件：子组件：$attrs和$listeners：父组件向子组件传递属性和事件，子组件通过$attrs获取属性，通过$listeners获取事件并绑定在子组件上。父组件
【Vue2】父子、兄弟组件通信遇到的问题汇总
NineWaited的博客
08-14 798
关于父子通信的使用以及关于v-for中父子组件之间的通信的相关问题的解决都有说明。包括$ref, $emit, props等的使用。
vue实现父子组件之间传参并且实现封装组件
Alisane的博客
12-28 435
需求描述：封装一个进度条组件，点击该组件，传值给父组件 父组件通过属性给子组件传值，子组件用props来接收父组件的值 子组件通过$emit给父组件传值，父组件通过相应的方法接收子组件的值 父组件：parent.vue <template> <div> <Progress v-for="(item,index) in text" :key="index" :parentData="item" @clickProgress="progress">&.
Vue中父组件向子组件通信的方法
08-30
使用 props 和 v-bind 指令可以实现父组件向子组件的通信。这种方法可以帮助开发者更好地管理组件之间的数据交互。 在 Vue 中，父组件向子组件通信的方法还有其他方式，例如使用 $emit 和 $on 事件、使用 Vuex 等...
vue子父组件通信的实现代码
08-30
Vue.js 是一个流行的前端...以上所述的代码示例和解释可以帮助你理解并实现Vue子父组件之间的数据通信。在实际开发中，根据项目的复杂程度选择合适的方法进行组件通信是非常重要的。如果有任何疑问，欢迎继续提问。
vue的props实现子组件随父组件一起变化
09-01
总之，`props`是Vue中实现父子组件通信的基础，它使得组件之间能够共享和同步数据。合理地使用`props`以及相关的机制，可以构建出灵活、可复用且易于维护的Vue应用程序。在实际开发中，应遵循单向数据流原则，避免...
Vue子组件向父组件通信与父组件调用子组件中的方法
08-27
Vue 子组件向父组件通信与父组件调用子组件中的方法 Vue 子组件向父组件通信是指子组件将数据或...Vue 子组件向父组件通信和父组件调用子组件中的方法是 Vue 中非常重要的技术，它们可以帮助我们实现复杂的应用程序。
vue 组件间的通信之子组件向父组件传值的方式
10-15
本文主要探讨的是Vue组件间通信的一个特定场景：子组件如何向父组件传递值。 首先，我们了解一个基本概念：父组件通过属性向子组件传递值。在Vue中，父组件可以通过在子组件标签上使用`v-bind`指令（简写为`:`)将...
vue父子组件通信
热门推荐
weixin_47013351的博客
04-22 1万+
一、父传子 在父组件中，用 v-bind动态绑定一个自定义属性，用于给子组件传递数据 父组件： <template> <div> <child :users="user"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child },.
VUE中组件之间的通信方式
qq_44810886的博客
04-15 4245
目录 父子组件之间的通信方式 1.props+$emit() 3.$parent+$children 4.provide+inject 5.$attrs+$listeners 6.ref+$refs （备注视频代码学习来自：重要！父子组件通信的方式有哪几种？【Vue面试题】_哔哩哔哩_bilibili） 父子组件之间的通信方式 1.props+$emit() 1.父组件通过props向子组件传递数据（在子组件中用props接收） 2.子组件通过$emit()向父组件传递数据或事件，如
vue2的组件通信方式
m0_52704461的博客
10-11 236
靠函数参数传递的方法将数据带给父组件，具体分三步：第一步，在子组件 标签上 上使用v-on（简写为 @）绑定自定义的 事件名 以及对应的处理函数，可以类比原生事件 @click=“handle(e)”；第二步，在子组件中调用其他函数，使用 this.$emit(‘事件名’,参数) 的方法触发事件；第三步，子组件的参数被传递出去Student组件不需要任何变化主要变动有两处，第一处 是子组件标签中 使用ref属性；第二处 是不在methods或者watch中 定义处理函数，而是在生命周期函数中处理。
详解vue中的组件通信的几种方式，父子组件通信，兄弟组件通信，父组件触发子组件事件，子组件无法接受值的问题（一）
花落微凉梦清幽的博客
08-08 2965
在另一篇文章我们会谈及祖父孙三级之间的通信，传送门：vue组件通信的方式（二） 1.父组件向子组件传值（绑定属性）： 首先我们定义一个父组件father.vue： &lt;template&gt; &lt;div&gt; &lt;h1&gt;父组件&lt;/h1&gt; &lt;p&gt;{{mydata}}&lt;/p&gt; &lt;hr/&gt; &lt;
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
蒋川@卡拉云
05-30 1万+
Vue 消息提示通知组件（Message / Notification）是我们日常开发中经常使用的组件，它可用作与用户交互的反馈提示，信息提交成功、错误、操作警告等场景使用。原生 JavaScript 提供了 alert、prompt、confirm 等方法，这三个方法的不支持定制化，使用场景严重受限，特别是 alert 在浏览器外弹窗，体验非常糟糕。因此要想给用户提供良好的使用体验，我们需要封装一个定制化较好的 Vue 消息提示组件，这种组件看似简单，但也存在非常多深坑要小心，例如遮罩层、消失时间、点击
Vue父组件传给子组件数据,子组件得不到数据解决方法
m0_49714202的博客
07-21 1万+
Vue父组件传给子组件数据,子组件得不到数据解决方法
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
最新发布
epitomizelu的专栏
07-20 581
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
vue2 子组件和父组件通信
07-17
在 Vue 2 中，子组件和父组件之间的通信可以通过以下几种方式实现： 1. Props（属性）：父组件可以通过 props 将数据传递给子组件。子组件通过接收 props 来获取父组件传递的数据。这种方式是单向的，只能从父组件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值