深入了解Vue3组件传值方式
目录
- 父子组件传值 props
- 祖孙组件传值 provide 和 inject
- 父组件中点击按钮向子组件传值
今天说一下 vue3 的组件间传值,学习过 vue2 的宝子们肯定知道,组件传值是 vue 项目开发过程中必不可少的功能场景,在 vue2 里面有很多传值的方式,vue3 的传值方式呢,在这里稍微整理总结一下,但是不是很全,后期可能慢慢补充。
父子组件传值 props
和 vue2 一样,vue3 也可以使用 props 进行父组件传值给子组件,这个就不多说了直接上代码。
父组件
<template> <div> <div class="father"> <h1>这是父组件</h1> <h2>父组件的名字:{{boy.name}}</h2> </div> <hello-world :msg="msg" :boy="boy" @change="btn"></hello-world> </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; import { ref, reactive } from "vue"; export default { name: "App", components: { HelloWorld }, setup() { const boy = reactive({ name: "我是
相关推荐
-
Vue3兄弟组件传值之mitt的超详细讲解
目录 前言 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢? 项目中安装mitt 使用方式一:在原型中声明 使用方式二:在组件中引用 总结 前言 Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的.实现了事件触发器接口的库,例如 mitt 或 tiny-emitter. 比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢? 首先它足够小,仅有200bytes. 其次支持全部事件的监听和批
-
vue3父子组件传值中props使用细节浅析
目录 setup函数的参数 一.父组件要给子组件传值时,可以通过props来完成组件的通信 二.子组件给父组件传值 总结 setup函数的参数 它主要有两个参数: 第一个参数:props :父组件传递过来的属性会被放到props对象中 第二个参数:context:包含3个属性 attrs:所有的非prop的attribute slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到) emit:当我们组件内部需要发出事件时会用到emit 一.父组件要给子组件传值时,可以通过p
-
vue3 父子组件间相互传值方式
目录 vue3父子组件相互传值 父向子传值 子组件向父组件传值 vue3父子组件传值的注意事项 解决办法:两种 vue3父子组件相互传值 父向子传值 父 <pie-chart :pieData="post_data.pid" /> 父组件只需在子组件上声明一个变量即可. :代表变量,可以传变量;否则只能传常量 子 export default { props:['pieData'], setup(props,ctx) { const pie_
-
vue3 父子组件传值详解
现在距离vue3的诞生已经过了很长时间了,笔者也是近期才开始学习vue3.对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式.因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化 咱们先看下vue2中的写法 父组件: <!-- 父组件 --> <template> <div> <children :title="title" @getChildr
-
详解vue3中的非父子组件传值
目录 App.vue sub1.vue sub2.vue 总结 vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行为. vue3提供了**provide**和**inject**属性,可以实现非父子组件之间的通信: 假设有三个组件:App.vue(父级).sub1(子级).sub2(子级的子级): App.vue <template> <div style="border: 1px solid pink&q
-
深入了解Vue3组件传值方式
目录 父子组件传值 props 祖孙组件传值 provide 和 inject 父组件中点击按钮向子组件传值 今天说一下 vue3 的组件间传值,学习过 vue2 的宝子们肯定知道,组件传值是 vue 项目开发过程中必不可少的功能场景,在 vue2 里面有很多传值的方式,vue3 的传值方式呢,在这里稍微整理总结一下,但是不是很全,后期可能慢慢补充. 父子组件传值 props 和 vue2 一样,vue3 也可以使用 props 进行父组件传值给子组件,这个就不多说了直接上代码. 父组件 <te
-
详解Vue中组件传值的多重实现方式
vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下 在其中一个页面$emit 另一个页面
-
vue组件传值的11种方式总结
目录 1.父组件传给子组件 2.子组件传给父组件 3.兄弟组件间传值 4.路由间传值 i.使用问号传值 5.使用$ref传值 6.使用依赖注入传给后代子孙曾孙 7.祖传孙 $attrs 8.孙传祖 9.$parent 10.sessionStorage传值 11.vuex 总结 不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件 在子组件里定义一个props,即props:[‘msg’],msg可以是
-
vue传值方式的十二种方法总结
目录 一.父传子传递 二.子传父传递 三.兄弟组件通信(bus总线) 四.ref/refs(父子组件通信) 五.Vuex通信 六.$parent 七.sessionStorage传值 八.路由传值 九.祖传孙 $attrs 十.孙传祖使用$listeners 十一.promise传参 十二.全局变量 一.父传子传递 (1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量 (2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props: ["属性
-
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引
-
Vue和React组件之间的传值方式详解
在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式 组件的传值场景无外乎以下几种: 父子之间 兄弟之间 多层级之间(孙子祖父或者更多) 任意组件之间 父子之间 Vue Vue是基于单项数据流设计的框架,但是提供了一些的语法,指令去实现一些操作 父->子:通过props进行传递数据给子组件 子->父:通过emit向父组件传值 同时,还有一些其他进行父子组件通信的方式,通过$parent和$children获取组件的父或者子组件的实例,之后通过实例对象去修
随机推荐
- PHP has encountered an Access Violation at XXXXXX 的解决方法
- 用批处理写的永不被杀的后门
- iOS 中KVC、KVO、NSNotification、delegate 总结及区别
- ASP.NET MVC中SignalR的简单应用
- C#中Convert.ToDecimal()报错问题的解决
- PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
- 异步安全加载javascript文件的方法
- 恢复 Windows3.2 的屏幕设置
- 用PHP和Shell写Hadoop的MapReduce程序
- jQuery实现选项卡切换效果简单演示
- jQuery cdn使用介绍
- js数组中如何随机取出一个值
- Android 给RecyclerView添加分割线的具体步骤(分享)
- linux配置ISCSI服务器的方法
- 基于Java注解(Annotation)的自定义注解入门介绍
- JAVA中常见异常类
- Javaweb开发中通过Servlet生成验证码图片
- C++11的for循环,以及范围Range类的简单实现
- 用ASP实现距指定日期的倒记时程序源码
- C++类成员构造函数和析构函数顺序示例详细讲解