父子组件及组件间的数据传递

最新推荐文章于 2024-04-14 23:34:00 发布
最新推荐文章于 2024-04-14 23:34:00 发布
阅读量622 收藏 1
点赞数 1
分类专栏： 移动开发 文章标签： 前端 javascript 组件化 json 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenwenaier/article/details/121007655
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、组件是什么？

微信小程序中的组件形式和VUE中的组件形式很类似，如果提前学习过VUE的话，学习这部分会比较得心应手，什么是组件呢？
简而言之，就是我们把经常使用的代码组成一个模块，在以后的使用中不必重新写代码，只需要引入模块就可以了，比如导航条，在页面中出现了多次，我们就把他分离出去，以后用的时候直接引入模块，减少代码冗余

二、自定义组件的引入

1.新建自定义组件

在和pages同级的目录下我们新建一个components文件夹专门用来存放组件，我们组件的名称为Tabs
在这里插入图片描述

2.声明组件

在你想要使用的页面的json文件中对自定义组件进行声明
在这里插入图片描述

3.使用组件

在页面中将组件作为标签使用，标签名称在json文件中进行设置
在这里插入图片描述
观察页面
在这里插入图片描述
组件引用成功

二、父组件向子组件传递数据

使用组件的过程中会经常碰到父组件向子组件传递数据的问题，我们来演示一下如何使用

我们想完成以下页面，导航条的数据由父组件发送给子组件，子组件接收到后在页面进行渲染
在这里插入图片描述
我们现在父组件的js文件中设置好要发送的数据
在这里插入图片描述

在这里插入图片描述
子组件将在js文件中的propieties中接收这些数据
在这里插入图片描述
我们要接收的数据名称为tabs，类型为数组
在这里插入图片描述
得到父组件传递过来的数据之后我们便可以进行操作
在这里插入图片描述
在这里插入图片描述

二、子组件向父组件传递数据

我们在父组件中声明接收子组件数据的方法
在这里插入图片描述
我们通过this.triggerEvent(父组件方法名称,数据值)方法向父组件传递数据
第一个参数为父组件的方法，第二个参数是需要传递的数据
在这里插入图片描述
我们将父组件中接收到的数据打印出来
在这里插入图片描述
在这里插入图片描述
我们发现子组件所传递的数据就在e.detail中，此后在方法中对数据进行提取分析即可

温文艾尔
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
父组件接受子组件传值_（Vue起步）5.组件间传值（子组件向父组件传值：$emit）...
weixin_31265041的博客
01-26 281
NO.7关键词： v-bind: / $emit（向外触发事件）/ splice实现需求： 点击对应列表项即删除语法缩写： v-on:XXX="ssss" === @XXX="ssss" / v-bind:xxx="xxx" === :xxx="xxx" 一、父组件向子组件传值使用父组件页面模板（页面组件标签），通过v-bind:content="xxx" 的形式传给子组...
vue2.0父子组件间传递数据的方法
10-18
在Vue 2.0中，父子组件间的通信是框架的核心特性之一，对于构建复杂的应用程序至关重要。本篇文章将通过一个简单的小例子来详细介绍如何在父子组件之间传递数据。 首先，我们要明确Vue中组件间的通信主要有两种方式...
VUE父子组件传递数据
weixin_33736649的博客
02-12 135
1. 同步传递数据 父组件 food 通过 props 把 值为 0 的 type 字段传给子组件，子组件在初始化时可以拿到 type 字段，渲染出字符“0 水果” // 父组件 food.vue <template> <apple :type="type"></apple> </templa...
vue.js基础中父子组件之间的传值
最新发布
g_xlike的博客
04-14 564
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：父子关系，兄弟关系，隔代关系（可能隔多代）。这里我们将父子关系的传值针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 父子组件间通信的几种方式，如 props、emiton、vuex、$parent / $children、以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。
父子组件之间传递数据的方法
Issssy的博客
11-26 887
档子组件向父组件传递数据时，需要通过$emit()方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传来的数据。解释:当子组件里面点了这个按钮，就会触发一个叫sb的事件，那个父组件如果监听了sb就会调用。从父组件向子组件传递数据是最主要的方式，可通过组件的props(属性)和slot(插槽)来实现。当子的$emit执行时，就会自动调用父里绑定的函数，函数的参数就是子传递过来的数据。概念:父组件的数据改变了会自动流动到自组件，但是子不允许修改由props流过来的数据。
vue 父组件和子组件间传值的方法
u012967454的博客
02-12 231
1.通过属性传值 定义：xxx 然后在子组件中使用props:[“xxx”] 2.传递方法 （可通过在子组件中反馈参数 实现 子组件向父组件返值处理） 3.传递一整实例 ：xxx=“this” 子组件中 获取 时用 this.xxx.想要获取的属性和数值或者方法 ...
父子组件传递数据
xiaowei的博客
10-25 557
效果（输入数据，点击按钮提交。点击数据可删除） 父-子：父组件通过v-band绑定数据，子组件props接收数据 子-父：子组件通过$emit触发父组件的自定义事件并且传递数据，父组件通过监听事件接收。 代码 <!DOCTYPE html> <html lang="en"> <head
vue父子组件的数据传递示例
08-31
在 Vue 中，父组件可以向子组件传递数据，但需要使用 props 定义属性来绑定父组件里的数据。例如： ```html <aaa></aaa> 模板 aaa=>{{msg1}} <bbb :m='msg1'></bbb> var vm = new Vue({ el: "#box", data...
Vue 父子组件的数据传递、修改和更新方法
08-27
然而，可以使用props从父组件向子组件传递数据。若需要父组件实时更新子组件的状态，可以通过子组件触发自定义事件（`$emit`）来实现。例如，子组件中可以这样触发事件： ```javascript this.$emit('updateData', ...
VUE组件间参数传递样例
01-17
Props允许父组件向子组件传递数据。在子组件中定义prop属性，然后在父组件中通过属性绑定将数据传递过去。例如，在`src/components/ChildComponent.vue`中，你可以声明一个`message` prop： ```vue export ...
vue2.0父子组件及非父子组件之间的通信方法
08-31
在 Vue 中，父组件向子组件传递数据主要通过 `props` 属性。以下是一个简单的例子： 父组件（Parent）： ```html <child :child-msg="msg"></child> export default { data() { return { msg: [1, 2...
vue 进阶之实现父子组件间的传值
10-17
在Vue中，父子组件之间的通信主要通过props（属性）从父组件向子组件单向传递数据，以及通过事件（events）从子组件向父组件传递数据。 首先，我们来看一个简单的例子。在这个例子中，我们创建了一个名为`counter`...
Vue表单类的父子组件数据传递示例
08-27
Vue父子组件数据传递示例 Vue.js 是一个基于组件的开发方式，父子组件之间的数据传递是开发中的一大难题。本文将介绍 Vue 表单类的父子组件数据传递示例，主要讨论父子组件之间的数据传递方式。 一、传递基本类型...
Vue2.0父子组件传递函数的教程详解
08-29
在 Vue2.0 中，父子组件传递函数是一种常见的场景，主要用于父组件和子组件之间的数据交互。在本篇教程中，我们将详细介绍 Vue2.0 父子组件传递函数的教程详解。 一、通过 props 传递函数 在 Vue2.0 中，我们可以...
详解React之父子组件传递和其它一些要点
08-27
React 之父子组件传递和其他一些要点 React 是 R 系技术栈中最基础同时也是最核心的一环，2 年不到获取了 62.5k star（截止到目前），足可见其给力程度。在 React 中，组件生命周期是一个非常重要的概念，它规定了...
vue非父子组件通信问题及解决方法
08-27
通常情况下，我们可以使用 props 传递数据从父组件到子组件，但是这种方法无法应用于非父子组件之间的通信。在本文中，我们将介绍非父子组件通信的问题和解决方法。 问题描述： 在最近的登录部分开发中，遇到了一...
父子组件互相传值
m0_37697423的博客
06-24 2660
父组件向子组件传递数据 实现方法：子组件中通过props自定义一个prop或者多个prop来接收父组件传递过来的数据，每个prop的名字和父组件绑定数据的命名必须一致： 例如： 子组件内容： export default{ props:[“id”,”title”] }//这里接收数据写法 <template> <div> <h1>{{id}}{{...
在父子组件之间传递数据
weixin_66059613的博客
11-27 368
在父子组件之间传递数据
vue中父子组件的相互传递
忙着开花儿
01-18 326
子组件从父组件那获取数据 在子组件中， 把他想要从父组件那得到的数据写在props中 在父组件中， 调用子组件像这样 父组件从子组件那获取数据 在子组件中，触发函数调用this.$emit('事件名', 传递的数据) 在父组件中， 在调用子组件时    注：getVal(val){this.val=val} 为method内一函数实例如下：实现功能介绍：点击父组件按钮设置isShow的值，传给子组
Vue父子组件间参数如何传递
05-27
在 Vue 中，父组件向子组件传递参数可以通过 props 实现，子组件通过 props 接收父组件传递的参数。具体步骤如下： 1. 在父组件中定义要传递的参数，使用 v-bind 或简写语法 : 绑定到子组件的 props 上。 2. 在子...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

温文艾尔

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

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

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

打赏作者

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

抵扣说明：

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

余额充值