【Vue】浅谈Vue中组件传值的几种方式

最新推荐文章于 2024-08-03 14:56:10 发布
最新推荐文章于 2024-08-03 14:56:10 发布
阅读量342 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jean_0920/article/details/101072553
版权

浅谈Vue中组件传值的几种方式

Vue中传值主要分为两部分

父子通信

1.父传子
传递：当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性，值为需要传递的数据
接收：在子组件内部通过props进行接收
接收的方式有2种 一种是数组接收 另一种是对象接收
一般情况下我们都使用对象进行接收，因为对象接收可以校验数据的类型
例子
props:[“val”];
props:{
val:String
}
2.子传父
传递:当子组件给父组件传递数据的时候，通过调用父组件给子组件绑定的自定义事件，然后将值传递过去
接收：父组件通过自定义事件的函数来接收子组件传递过来的数据(注意这个自定义方法的函数在绑定的时候不需要加())
（2）、作用域插槽　
　　　　带参数的插槽
　　　　反向传值
　　　　将子组件的数据传递给父组件，只需要给组件内部的slot绑定一个自定义属性
　　　　在父组件中，子组件标签的内部书写一个template标签，通过scpoe来接收子组件传递过来的数据
3.非父子
1、在vue的原型身上添加一个公共的vue实例，组件之间调用这个公共的实例的 o n / on/ on/emit来传递数据 传递的一方调用
e m i t 接 收 值 的 一 方 调 用 emit 接收值的一方调用 emit接收值的一方调用on;
2、手动封装$on $emit $off—>原理应用了观察者模式
3、EventBus
4、vuex

白色薄荷糖
关注
专栏目录
vue中组件传值的五种方式
weixin_46052938的博客
07-30 1902
vue组件传值的五种方式 方法一 props传参 父组件 <template> <div class="container"> <div>我是父组件</div> <Son str="字符串" :num="5" :obj="{ name: '对象信息' }" :func="() => {this.list()}" :arr="arr" ></S
VUE面试题
永生天地
02-17 1472
一、vue 生命周期 先看一张图片，图片来源于官网：https://cn.vuejs.org/v2/guide/instance.html 以上钩子详细：（只解释了几个主要的） 1.beforeCreate 在页面被加载的时候首先会创建一个Vue的实例，并且初始化该实例，在实例初始化之后，此时被调用的生命周期钩子叫做：beforeCreate,这个时候数据的观测和事件还没有被调用（特就是说此时还读取不到data里面的数据和实力内的方法） 2.created 当vue实例初始化后，实例创建完成后立
vue 中组件传值的几种方法，你知道吗？
酱子
08-04 268
vue 中组件传值的几种方法 1. 父组件向子组件传值 一般会在子组件里面定义props来做接收 父组件： <template> <div> <div>我是父组件</div> //向子组件传值msg <ChildOne :msg="msg" /> </div> </template> <script> export default { data() { ret
【Vue自学笔记】组件间数据传递
最新发布
qq_35712802的博客
08-03 817
父组件可以改，并且父组件改了之后所有子组件的这个值都会跟着改，单向传递。Vue的单向数据流指的是，数据在父组件中被定义和更新，然后通过props的形式传递给子组件，子组件可以读取这些props，但不能直接修改它们。如果父组件的数据在子组件中能够被更改，那子组件再传给子子组件，如果子子组件再做更改，那是不是每个拿到这个数据的组件都要去更新这个值呢…刚开始看这个名词，可能会认为是：数据只能够从父组件传到子组件，而不能从子组件传到父组件。的指向，Vue 是监测到的，按照单向数据传递原则是不给的，保护数据！
vue组件之间传值—基础方法
weixin_49173037的博客
04-03 293
前言 vue的组件传值分为三种方式：父传子、子传父、非父子组件传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递 父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示： 下面我们就开始用代码（一言不合就上代码）详细的介绍vue组件传值的三种方式 1、父传子 子组件的代码： <template> <div id="container"> {{msg}} </div&gt...
vue中组件传值的几种方式。
weixin_34210740的博客
02-19 945
一、父传子 　　当子组件在父组件中当做标签使用的时候，给子组件定义一个自定义属性，值为想要传递的数据。 在子组件中通过props进行接收，props是专门用来接收外边的的数据的，有两种接收方式，数组和对象，对象可以限制数据的类型。 　　在这里简单介绍一下单项数据流的概念。 　　单向数据流：父组件向子组件传递数据的时候，子组件不允许更改父组件的数据，因为父组件会向多个子组件传值，如果说某个子...
Vue组件之间传递数据的五种方式_详解
热门推荐
蒲公英芽的博客
04-04 1万+
Vue 组件之间数据传递的几种方式： 父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on 监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。 祖先组件通过依赖注入(inject / provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。 通过属性$root / $parent /...
浅谈 Vue 项目优化的方法
08-28
浅谈 Vue 项目优化的方法 本文旨在介绍 Vue 项目优化的方法，涵盖基础优化、模板优化、样式优化和脚本优化等方面的知识点。 基础优化是任何 Web 项目都需要做的，是问题的根源。我们需要关心 HTML、CSS、JS 三个...
vue插槽面试题_常见的vue面试题
weixin_39566578的博客
12-21 2018
001、v-show与v-if的区别v-show:操作的是元素的display属性v-if:操作的是元素的创建和插入相比较而言v-show的性能要高002、methods、computed、watch三者的区别methods是个方法，执行的时候需要事件进行触发computed是一个计算属性，是实时响应的，只要data中的属性发生了变化那么就会触发computed，计算属 性是基于属性的依赖进行缓存...
vue 相关面试题（路由）
m0_63775072的博客
10-25 3583
1.浅谈对路由的理解什么是路由？根据不同的url地址展示不同的页面内容 或者数据路由分为前端路由和后端路由前端路由：1、前端路由 多用于单页面开发，也就是SPA。2、前端路由是不涉及到服务器的，是前端利用hash或者JavaScript的historyApi来实现的，一般用于不同的内容展示和切换。
vue插槽面试题_vue面试题（一）
weixin_39680678的博客
12-21 859
1.v-show与v-if的区别v-show：操作的是元素的display属性v-if：操作的是元素的创建和插入v-if有更高的开销，而v-show有更高的初始化渲染开销，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好使用场景：v-show：前台数据的展示v-if：管理系统权限列表地展示2.methods、computed、watch三者区别三者之间地...
Vue 组件传值几种常用方法【总结】
08-27
本文是脚本之家小编给大家整理的vue组件传值几种常用方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue中的组件传值
VVVZCS的博客
09-01 2130
父组件向子组件传值 这是最开始的代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;script src="vue.js&qu
浅谈Vue组件之间的传值
chendu98的博客
10-26 394
一、主要方式 1、父子组件之间的传值 2、非父子组件之间的传值 二、父子组件之间的传值 1、父组件向子组件传值 第一种方式: 　props　　　 　　　　　　父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象 父组件代码 <template> <div> <!-- 注意 :msg 后面是一个对象，值是字符串时,需要写冒号，如果省略：就是一个字...
Vue中组件的五种传值方式
xdlhw1997的博客
10-31 6058
父组件给子组件传值(props) 子组件给父组件传值(自定义事件$emit) 子组件给父组件传值(事件总线) 兄弟组件之间互相传值(利用pusub包传值) 组件间互传(利用vuex传值) //个人认为这个传值很six
VUE组件传值的几种方式
邱小健的博客
03-23 671
一、组件传值有几种类型呢？ 父组件给子组件传值 子组件给父组件传值 非父子组件的传值 二、下面具体说说有哪几种传递方式
vue组件传值的几种方法
Geezer_007的博客
04-22 484
父传子用：props 子传父： 子传父主要通过事件传递给父组件（通过$emit来传） 触发消息事件用$emit, 接收组件使用$on接受； 子传子： vue中没有直接对子传子传参的方法，可以用vuex状态管理工具，可以很方便完成实现子组件之间传参； 兄弟组件传值： 可用bus总线方式，也可以用vuex状态管理工具，建立公共j s文件专门用来传递信息； 简单的兄弟传值可以传给...
vue组件间的5种传值方式
qsj0606的博客
07-30 973
父组件向子组件传值： 比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件，完成共需四步： 父组件 Father.vue 内容，注意里面的操作步骤： <template> <div> <h2>父组件区域</h2> <hr /> <!-- 第二步：在引用的子组件标签里定义 :num="num" , num就是要传递的变量--> <Children :num="n
Vue组件间传值的几种方式
qq_43569680的博客
06-04 343
Vue组件间传值的几种方式 注意：在vue里面的一些固定参数使用的时候都需要加上一个$符号 父子组件之间传值方式一：props / $emit 1.props里接收父组件传递过来的数据，在父组件中使用v-bind绑定属性 例如： //加上单引号表示字符串 v-bind:msg="'from parent'" //没有v-bind就表示只是字符串 msg = 'from parent' //parent会被默认为变量，如果想把它变成字符串需要加上引号 ：msg = 'parent
vue父组件像子组件传值方式有几种
03-10
你好，关于vue父组件向子组件传值的方式，一般有props、$emit和provide/inject三种方式。其中props是父组件向子组件传递数据的最常用方式，$emit是子组件向父组件传递数据的方式，而provide/inject则是一种祖先组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值