vue使用組件（父子组件之间的使用，子传父，父传子）【超详细简单】

最新推荐文章于 2024-09-26 07:51:19 发布
最新推荐文章于 2024-09-26 07:51:19 发布
阅读量859 收藏 2
点赞数
分类专栏： uniapp vuejs效果 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leijiang0504/article/details/124455226
版权

组件之间的相互传值，话不多说，开整

首先是我们在components下面创建一个组件new.vue,这是我们的子组件

1，注册组件和调用

然后我们在main.js里去注册这个组件

 

import news from 'components/new.vue'
Vue.component('news',news)//子组件注册
Vue.use(news)
Vue.component('news',news)

注册完之后我们就可以去pages目录下的任意页面进行调用

这是打印效果

以上就是注册调用组件，下面跟大家说说怎么去用父组件给子组件传值

首先我们在组件上直接给参数就行像这样

2，父组件给子组件传递参数

然后再到子页面去接受数据，接受数据的时候我们用props,里面写我们在组件上给的参数就行，像这样

下面是效果图

 

这样我得数据就从父页面传递过来了，非常简单，除了传递参数之外我们还可以父页面调用子页面的方法

 3，父页面调用子页面的方法

 首先我们在子页面写一个方法news

 然后我们回到父页面，用ref来控制调用子组件的方法

 

下面是打印效果

 

是不是非常的简单

4，子组件调用父组件的方法 

首先我们在父组件里随便定义一个方法,记得要在组件是写好方法名，不然不可以的，给你们画红圈的地方都要看一下

 

然后回到子组件里去掉用 我们在子组件使$emit去调用父组件的方法，这里注意方法名要写对哈不然调用不了

下面我们来看一下打印效果 

这样就调用到父组件的方法啦，是不是非常简单，不定时更新哦，欢迎留言，一起进步！！！ 

沐卿゚
关注
专栏目录
vue父子组件间引用：$parent、$children
flying meng的菜鸟居
05-18 6106
vue中提到【父子组件】，则一定会想到我们常用的父子组件通信：props+$on()、$emit() ，如图： 也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit将数据从子组件传到父组件，以此循环引用。 但是在另一些场景下，我们可能想要比如（在父组件中）拿到子组件对象，然后直接操作其中数据，去实现一些功能，比如方法的调用。 有时候我们需要父
vue2.0 子组件和父组件之间的传值
书写人生
04-07 1426
App.png一.父组件向子组件传值1.创建子组件，在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props，然后创建一个名为message的属性child.png3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值App2.png4.保存修改的文件，查看浏览器browser.png...
Vue中父子组件通信
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-26 865
父子通信：这是最常见的通信方式，通常通过 props 和自定义事件来实现。非父子通信：跨越多个层级的组件间通信，可以通过全局事件总线、Vuex 状态管理等方式来实现。跨域通信：不同源的组件间通信，可以通过 MessageChannel、WebSocket 等技术实现。本文重点讨论第一种情况——父子组件通信。
vue子组件使用细节
xiaonanhaijing的博客
10-25 162
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件使用中的细节点,子组件的正确使用方式</title> <script src='./vue.js'></script> </head> <body> <div id="root">
关于vue中子组件使用
weixin_43194434的博客
10-26 1732
vue中定义子组件以及在其他组件中使用记载 首先 ，定义一个子组件,然后把它暴漏出去。例如 定义一个name为 btns的子组件： &amp;lt;template&amp;gt; &amp;lt;button&amp;gt;111111&amp;lt;/button&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; export default {
vue的子组件
weixin_64037609的博客
11-07 2051
组件在vue中是一个很强大的功能,可以对HTML进行扩展,在大型应用中,可以对一些抽象的功能进行 封装。
快速了解Vue父子组件传值以及父调子方法、子调父方法
10-15
本文将深入探讨Vue父子组件之间的数据传递和方法调用。 1. **父传值给子组件** 在Vue中，父组件向子组件传递数据主要通过`props`属性实现。首先在父组件的模板中，我们使用`:propName`（或`v-bind:propName`）将...
vue 父组件中调用子组件函数的方法
10-16
在Vue.js框架中，父子组件之间的通信是常见的需求，其中父组件调用子组件的方法是实现特定功能的重要方式。以下详细介绍Vue中父组件调用子组件函数的方法及其知识点。 首先，要理解Vue组件的定义与引用方式。一个...
vue父组件触发事件改变子组件的值的方法实例详解
10-17
本篇文章将详细讲解如何在Vue中实现父组件触发事件来改变子组件的值。 首先，我们要理解Vue中的父子组件通信机制。Vue提供了多种方式来进行这种通信： 1. **通过props向下传递数据**：父组件可以通过props属性将...
Vue父组件如何获取子组件中的变量
10-16
父子组件的数据通信可以通过多种方式实现，其中一种方式就是通过在父组件中使用ref属性来直接获取子组件的实例，并访问子组件的数据或方法。 在Vue.js中，ref属性用于给元素或子组件注册引用信息，它相当于给该元素...
Vue.js父与子组件之间传参示例
10-20
在子组件`componentA.vue`中，我们需要声明`props`数组，包含`msgfromfa`，这样子组件就能接收到父组件传过来的值。例如： ```html // App.vue (Just Say U Love Me)"> // componentA.vue <p>{{ msgfromfa }} ...
vue 子组件引用
weixin_34389926的博客
11-05 161
使用 ref 为子组件指定一个引用 ID。例如： &lt;div id="parent"&gt; &lt;user-profile ref="profile"&gt;&lt;/user-profile&gt; &lt;/div&gt; 引用子组件： var parent = new Vue({ el: '#parent' }) // 访问子组件实例 var child...
父子组件的使用
qq_45068048的博客
02-20 487
1.父组件传值到子组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpe :tgoods="goods" @btnclick="btncl" ></cpe> &l
Vue——使用子组件
weixin_41635393的博客
05-04 219
父组件Home.vue和子组件Header.vue在同一级文件夹下 在父组件中注册并使用子组件 一、引入子组件 在script中写 import Header from './Header.vue'; 二、注册子组件 export default { components: { 'v-header': Header, }, } 三、使用子组件 在...
父组件和子组件的使用
wqy18378671261的博客
06-02 316
子组件在父组件中注册的，只能在父组件中使用，准确一点的说，子组件只能在父组件的template中使用。 代码如下： <div id="app"> <parent-component></parent-component> </div> <!-- 借助免费的CDN来引入vue.js文件 --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.m
vue使用(三)----------父子组件的使用
weixin_34291004的博客
11-24 98
父组件和子组件的区分 使用组件者为父，被使用组件者为子 父需要声明子组件，引入子组件对象，声明方式如下 import 子组件对象 form './xxx.vue'; { components:{ 组件名：子组件对象 }} 全局组件，使用更为方便，不需要声明，直接使用在main.js中引入一次 声明全局组件：'vue.component（'组件名'，组件对象);' ...
Vue 父子组件应用指南：从基础到实战
weixin_43749805的博客
06-14 4198
Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。其中，父子组件的概念是 Vue 开发中非常重要的一部分。本文将介绍如何使用 Vue 创建父子组件，并通过代码来分析实际应用。
父子组件间传值，父传子，子传父
Coloryi的博客
05-10 784
父子组件给子组件传值 第一步：爸爸将数据递给儿子，所以我们就需要在子组件绑定父组件的数据 第二步：爸爸都已经将数据给你了，那么你就要礼貌性的伸手去拿，这时我们可以利用props去接爸爸传过来的值 第三步：当你拿到值的时候，就可以随意发挥数据的作用啦 代码如下： 父组件： <template> <div id="a...
vue-组件以及父子组件的基本使用
HPF_99的博客
01-14 239
注意局部组件与全局组件的区别 局部组件要在Vue对象中注册 而全局组件可以用Vue.component(“com”,com);直接注册 局部组件只有在挂载的Vue对象中注册的才可以使用，全局组件在所有的Vue对象中都可以使用 ES6中可以使用``中间可打回车 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head>
前端vue子组件传父组件
07-25
在Vue.js中，子组件向父组件传递数据通常有多种方式。主要的途径包括属性绑定、自定义...通过以上两种方式，你可以有效地在Vue应用中实现父子组件间的数据交换。这使得Vue的应用结构清晰、功能模块化，便于管理和维护。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

沐卿゚

帅哥美女多多支持哦，希望能帮助

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

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

打赏作者

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

抵扣说明：

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

余额充值