首页 > 其他分享 >[Vue]子组件与父组件之间传值

[Vue]子组件与父组件之间传值

时间:2022-10-17 09:01:34浏览次数:70  
标签:Vue 传递数据 https props 组件 query 传值

1.父组件与子组件传值props

1.1定义父组件,父组件传递 inputText这个数值给子组件:

//父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单:
<add-widget :msg-val="msg"> //这里必须要用 - 代替驼峰 // HTML 特性是不区分大小写的。所以,当使用的不是字符串模板,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名,当你使用的是字符串模板的时候,则没有这些限制 
</add-widget>
data(){ return {
        msg: [1,2,3]
    };
}

1.2定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会报错。

//子组件通过props来接收数据: //方式1:
props: ['msgVal'] //方式2 :
props: {
    msgVal: Array //这样可以指定传入的类型,如果类型不对,会警告
} //方式3:
props: {
    msgVal: {
        type: Array, //指定传入的类型
        //type 也可以是一个自定义构造器函数,使用 instanceof 检测。
        default: [0,0,0] //这样可以指定默认的值
 }
} //注意 props 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用

注意:父子组件传值,数据是异步请求,有可能数据渲染时报错

  • 原因:异步请求时,数据还没有获取到但是此时已经渲染节点了
  • 解决方案:可以在父组件需要传递数据的节点加上 v-if = isReady(isReady默认为false),异步请求获取数据后(isReady赋值为true),v-if = isReady

2.子组件向父组件传递数据

子组件通过$emit方法(用来触发事件,详情见官网)传递参数:

子组件:

image.png

父组件:
image.png

为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符,如

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

使用.sync修饰符:

<text-document v-bind:title.sync="doc.title"></text-document>

详情见api:https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符

3.子组件向子组件传递数据

Vue 没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。

或者通过eventBus或vuex(小项目少页面用eventBus,大项目多页面使用 vuex)传值:

3.1通过eventBus(即通过on监听、emit触发的方式)

3.1.1定义一个新的vue实例专门用于传递数据,并导出

image.png

3.1.2定义传递的方法名和传输内容,点击事件或钩子函数触发eventBus.emit事件

image.png

3.1.3接收传递过来的数据

注意:enentBus是一个另一个新的Vue实例,区分两个this所代表得vue实例

image.png

3.2vuex进行传值

详情见:https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

4.画面迁移的组件之间传递数据

4.1通过路由带参数进行传值,例:两个组件 A和B,A组件通过query把orderId传递给B组件

A组件传值写法:

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

B组件取值写法:

this.$route.query.orderId

注意:

4.1.1、Vue-详解设置路由导航的两种方法:声明式的导航   和编程式的导航router.push(...)

****4.1.2、其中画面迁移有push和replace两种方式,详情如:https://www.cnblogs.com/vickylinj/p/10880869.html

****4.1.3、传参的方式又分为查询参数query(+path)和命名路由params(+name)两种方式:

  • 命名路由搭配params,刷新页面参数会丢失
this.$router.push({ name: 'news', params: { userId: 123 }})
  • 查询参数搭配query,刷新页面数据不会丢失
this.$router.push({ path: '/news', query: { userId: 123 }});
  • 接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值
this.$route.params.userId
this.$route.query.userId

详情如:https://blog.csdn.net/crazywoniu/article/details/80942642

4.2通过设置 Session Storage缓存的形式进行传递

两个组件A和B,在A组件中设置缓存orderData

const orderData = { 'orderId': 123, 'price': 88 } 
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

B组件就可以获取在A中设置的缓存了

const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))

5.通过provide/inject传值

详情见:https://www.cnblogs.com/vickylinj/p/13368745.html

6.通过$attrs、$listeners传值

详情见:https://www.cnblogs.com/vickylinj/p/13376391.html

转载于 # [Vue]子组件与父组件之间传值

标签:Vue,传递数据,https,props,组件,query,传值
From: https://www.cnblogs.com/Sultan-ST/p/16797895.html

相关文章

  • Vue.$nextTick的原理是什么-vue面试进阶
    原理性的东西就会文字较多,请耐下心来,细细品味Vue中DOM更新机制当你气势汹汹地使用Vue大展宏图的时候,突然发现,咦,我明明对这个数据进行更改了,但是当我获取它的时候怎么是上......
  • vue表格大量input框渲染性能优化
    背景有一个表格,想要通过输入框编辑内容,但是在性能低下的电脑渲染1000+的输入框时该页面存在加载缓慢的问题原因不同的dom渲染消耗的内存是不一样的,input输入框消耗比较......
  • vue-element图片上传
    <el-upload action="" :limit="1" :on-change="handleChange" :auto-upload="false" :file-list="fileList" :show-file-list="false"> <span>选择文件</span></e......
  • [转] VUE 的常用指令
    <divid="app"><pv-text="username"></p><pv-text="gender">性别</p><p>姓名:{{username}}</p><p>性别:{{gender}}</p>......
  • Vue CLI的详细介绍与讲解
    目录什么是VueCLICLI是什么意思?VueCLI使用前提安装Node.JScnpm安装VueCLI使用前提-WebpackVueCLI的使用VueCLI2选项详解目录结构详细Runtime-Compiler和Runtime-on......
  • Vue.js -- 样式绑定
    前言本文主要介绍了vue.js样式绑定的几种形式。class字符串形式代码演示:<!DOCTYPEhtml><htmllang="en"><head><title>vue样式绑定</title><scriptsrc=......
  • Vue组件和插件
    两者的区别组件注册通过“Vue.component”或“components”属性,而插件通过“Vue.use()”;组件是用来构成App的业务模块,它的目标是“App.vue”,而插件是用来增强技术栈的功......
  • 第一章 Vue基础入门
    文章目录​​引言​​​​1.快速入门​​​​1.1.创建项目​​​​1.2.模型和视图​​​​1.3.双向数据绑定​​​​2.{{}}-插值​​​​2.1.语法​​​​2.2.案例​​​......
  • SpringCloud的Eureka组件
    SpringCloud的Eureka组件1.*Eureka概述1.*.&Eureka是什么Eureka是Netflix的一个子模块,也是核心模块之一。Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层......
  • Vue事件不带参数和带一个参数
    <script>exportdefault{ data(){  return{   message:0,   put1:'www.96net.com.cn',  } }, methods:{  dianji(p){   ......