vue中父子组件的简单传值问题

最新推荐文章于 2023-03-30 18:12:13 发布
最新推荐文章于 2023-03-30 18:12:13 发布
阅读量901 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flower521528/article/details/127254322
版权

基于vue的组件化思想，vue的父子组件之间的传值问题是非常的重要的，封装一个好的、简便的组件对工作有很大的帮助。

1、父传子

子组件需要props属性来接收父组件传过来的值

下面以我自己工作中封装的一个小组件举例

在子组件中，props可以接收很多类型的值

type:代表接收值的类型，

require：代表是否一定需要父组件给子组件传值（Boolean）

default:是子组件默认接收的值，如果父组件没有给子组件传值，子组件接收这个默认值

 那么父组件如何传值呢

首先我需要把疯转的组件import过来，然后进行组件注册（或者挂载）

最后直接在注册的标签上传值

例如：

:card-cover="需要给子组件传递的值"

这里有两个注意点： 

1、card-cover前面如何加冒号的话，后面就是解析的js表达式，否则就是字符串

2、子组件的cardCover( 驼峰式写法)和父组件card-cover（连接写法）是严格的，不然会出现莫名的bug

 

 2、子传父

子传父通过$emit的方法来进行传递

        2、1、在子组件中加一个事件

用$emit来发射这个事件

this.$emit("事件名",需要传递的值)

         2、父组件需要做的事情

用一个事件来监听子组件的动作

用e（随便定义一个值）,来接收子组件传过来的值

 

 

 

 okk，这样就完事了，文字功底不咋地，写的有点杂乱，哪有有疑惑的可以私信我，看见会第一时间解惑，有需要我封装的组件的也可以找我

棋宣
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
vue中父组件没给子组件传递值时，显示设置默认值
qq_45656036的博客
07-22 2004
1父组件没给子组件传递值的时候，显示默认值 例如： 在父组件中定义一个属性值，然后不传给子组件，那么在子组件中接收到的就是一个空值，在使用这个空值的时候，啥也没有。这个时候我们就可以给这个属性设置一个默认值。具体代码如下： 1.在父组件中定义的属性： data(){ return{ propA:'Hello World', } }, 2.在父组件中挂载和使用子组件，但是不给子组件进行属性传递 <about></about> 3.在子组件中，用props接
父组件往子组件之间传参，赋值两次，子组件获取不到数据变化
我的博客
04-14 592
在父组件中需要调用两个接口，放入一个list，然后传给子组件渲染页面但是在子组件中用深度监听都没有监听到数据变化，控制台输出如下：子组件已经渲染加载，但是父组件中的接口在这之后才查出来。
vue3 父子/子传参
NEWonclick的博客
09-19 966
vue3 组件传参
vue 父组件在获取数据之后向子组件传值是为data里面的初始值，而不是接口获取的数组
wjm0519的博客
10-30 3097
1.场景：首先在mounted里面执行接口，并获得相应的数据，有父组件传值到子组件 2.问题：子组件的接受到的数据是父组件data里面定义的默认值，而通过接口获取的后台数据 3.父组件 4.子组件 5.打印结果 6.解决办法 在子组件传参的时候加一个判断，当接口成功获取数据之后在传参 ...
Vue中 父子传值 数据丢失问题
weixin_30773135的博客
08-27 965
在Vue中，父子组件传值，子组件通过props接收父组件传递的数据 父组件 questionList :传递数据参数 questionsLists: 传递数据源 子组件 porps 接收父组件方式有俩中，一种是通过对象形式，一种是通过数组形式，通过数组形式接收多个数据时用逗号隔开即可。比如：props：['a','b']。 需要注意的是在子组件中...
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改...
vue3父子组件传值.doc
02-05
vue3父子组件传值
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
解决Vue中 父子传值 数据丢失问题
10-16
主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
浅谈vue父子组件怎么传值
10-18
主要介绍了浅谈vue父子组件怎么传值,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何在使用vue框架进行组件化开发中，解决父子通信数据传输问题-----子传父
zayyo的博客
10-14 101
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
vue20-父子组件传值
徐海兴的专栏
09-24 135
下面代码是一个计数器的代码，父组件把初始值传给了子组件，子组件接收后，+1时，又把加的步长传给了父组件，在父组件中显示的总和。 &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;Hello world&lt;..
vue 子组件获取父组件的传递的默认值,并初始化data
King Saj
02-10 647
export default { data() { console.log(this.$options.propsData,121) return { radioValue: 1, workday: 1, cycle01: 1, cycle02: 2, average01: 1, average02: 1, checkboxList: [], // 子实例要获取父实例传下来的值，就要通过this.$options.propsData check
VUE父子传值报错问题
weixin_67434908的博客
03-30 259
报错原因，父组件调用子组件传参数过去，子组件接收后改变该参数就报错。解决方法，在data里再定义一个变量接收，然后使用watch监听。
Vue组件传参
weixin_48494427的博客
07-27 1307
如果需要父向子传参时，则需要在子组件Son中添加一个props（与data平级）。比如fromfather{default0,typeNumber}传参时只需要在父组件中使用子组件这里使用的属性名必须与子组件中props上定义的一样。在子组件Son的methods中定义一个方法，其中有this.$emit('自己定义的方法名',要传的数据)父组件向子组件共享数据需要使用自定义属性----props。...
Vue 父子组件传值与验证props
LuckyBrown的博客
03-29 1125
实例： App.vue <template> <div id="app"> <h1>{{ msg }}</h1> <!-- 3.在模板中使用 --> <v-home></v-home> <br> </div> </template> ...
【组件层级过深传参】子组件给父组件的父组件传递参数/ 父组件给深层子组件传参
qq_17335549的博客
05-11 508
每日鸡汤，每一个你想要学习的念头都是未来的你向自己求救 会用vue的都知道，子组件给父组件传递参数一般是用$emit('name', params) 但是有这么一种情况，子组件A需要把参数传递给父组件B, 父组件B有需要把参数传递给它的父组件C 更加繁琐的是，在B中不会有多余的操作，就是单纯的传值，其实理想状态是A可以直接给C传，那么这种情况怎么实现呢？ <C> <b> <a>子组件</a> </b> &l
Vue 组件传值的12种方法
qq_42753091的博客
08-15 2446
Vue 组件通信方式
Vue3中父子传值及父子调用方法
liyajun54的博客
10-12 2703
在上面子组件给父组件传值的功能中我们可以了解到，子组件是通过调用父组件的方法进行的传值，所以子组件给父组件传值的同时也是在调用父组件的方法，那么父组件怎样调用子组件的方法呢？在开始之前，我们先看一下Vue3的语法结构，下面代码是我根据自己的理解添加的注释，与Vue2的语法差别还是比较大的，不过从注释中我们也更直观的理解了整个语法与Vue2之间的区别和联系。下面是本人在学习使用的过程中的一些记录。子组件给父组件传值的时候，其实就是调用父组件中的定义的回调方法，所以子给父传值与子调用父功能函数的方法是相同的。
vue2父子组件实时传值
最新发布
07-14
在Vue2中，父子组件之间可以通过props和事件来实现实时传值。 1. 使用props：父组件可以通过props向子组件传递数据，子组件可以通过props接收并使用这些数据。当父组件的数据更新时，子组件会自动更新。 父组件： ```vue <template> <div> <p>父组件数据：{{ parentData }}</p> <child-component :childData="parentData"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentData: '父组件初始数据', }; }, components: { ChildComponent, }, }; </script> ``` 子组件： ```vue <template> <div> <p>子组件数据：{{ childData }}</p> </div> </template> <script> export default { props: { childData: { type: String, required: true, }, }, }; </script> ``` 2. 使用事件：子组件可以通过$emit触发自定义事件，并将数据传递给父组件。父组件可以通过监听子组件的自定义事件来获取子组件传递的数据。 父组件： ```vue <template> <div> <p>父组件数据：{{ parentData }}</p> <child-component @updateData="updateParentData"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentData: '父组件初始数据', }; }, components: { ChildComponent, }, methods: { updateParentData(childData) { this.parentData = childData; }, }, }; </script> ``` 子组件： ```vue <template> <div> <button @click="updateData">更新父组件数据</button> </div> </template> <script> export default { methods: { updateData() { const childData = '子组件数据'; this.$emit('updateData', childData); }, }, }; </script> ``` 通过以上两种方式，父子组件之间可以实现实时传值。在props方式下，父组件的数据更新会自动反映到子组件上；在事件方式下，子组件通过$emit触发自定义事件，父组件通过监听事件来获取子组件传递的数据并更新父组件的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

棋宣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值