位置: IT常识 - 正文

Vue2-父子组件传值(vue父子组件如何传递数据)

编辑:rootadmin
Vue2-父子组件传值

推荐整理分享Vue2-父子组件传值(vue父子组件如何传递数据),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue父子组件间的参数传递是如何做到的,vue父子组件间的参数传递是如何做到的,vue父子组件传值props,vue2父子组件传参,vue父子组件传方法,vue2父子组件传参,vue2父子组件传参怎么双向绑定,vue2父子组件传值,内容如对您有帮助,希望把文章链接给更多的朋友!

在日常开发中,我们经常会在一个组件中嵌套另外一个组件,那么如果我们父组件要向子组件传值该怎么办?子组件向父组件通信又该怎么办?本文将详细举例说明这些问题。

父向子通信问题描述

现在我们有个需求,我们要分别显示父和子的信息,我们当然可以在一个组件中直接显示全部信息,但是万一以后又来一个需求:我们要在母和子的信息,那其实这里就存在冗余了,所以我们把子组件单独封装成一个新的组件。那么这里就会出现一个问题,子组件的信息该如何从父组件传过去呢?

解决方案

使用vue提供的prop属性,下面边看代码边分析: 父组件定义

<template> <div class="father"> 这里是父组件,我们会在这里展示父的信息 {{ fatherName }} {{ fatherAge }} <son/> </div></template><script> import son from "@/components/son"; export default { name: "father", components: { son }, data() { return { fatherName: "张三", fatherAge: 12 } } }</script><style lang="css"> .father{ border: 1px solid black; }</style>

子组件定义

<template> <div class="son"> 这里是子组件,我们会在这里展示子的信息 </div></template><script> export default { name: "son" }</script><style scoped> .son{ margin: 10px; border: 1px solid red; }</style>

使用:attribute属性向子组件传入值

<template> <div class="father"> 这里是父组件,我们会在这里展示父的信息 {{ fatherName }} {{ fatherAge }} <son :sonInfo="sonInfo"/> </div></template><script>import son from "@/components/son";export default { name: "father", components: { son }, data() { return { fatherName: "张三", fatherAge: 12, sonInfo: { sonName: "王小虎", sonAge: 6 } } }}</script><style lang="css">.father { border: 1px solid black;}</style>

子组件通过props属性接收父组件传过来的值,这里的名字要和父组件传的值对应

<template> <div class="son"> 这里是子组件,我们会在这里展示子的信息 {{ sonInfo.sonName }} {{ sonInfo.sonAge }} </div></template><script>export default { name: "son", props: ["sonInfo"]}</script><style scoped>.son { margin: 10px; border: 1px solid red;}</style>

测试

扩展

上述的例子解决了父子组件传值的基本问题,当然prop的用法还有很多,我们可以在vue2官网上看到

Prop的大小写

camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'})<!-- 在 HTML 中是 kebab-case 的 --><blog-post post-title="hello!"></blog-post>Prop 类型

我们之前使用以字符串数组形式列出的 prop

props: ["sonInfo"]

我们也可以给每一个prop指定对应的值

props: { title: String,//字符串 likes: Number,//数字 isPublished: Boolean,//布尔 commentIds: Array,//数组 author: Object,//对象 callback: Function,//函数 contactsPromise: Promise //异步延迟对象}传递静态或动态 Prop

之前我们传递的是动态的Prop,可以动态赋值

<son :sonInfo="sonInfo"/>

我们也可以传递静态的

<son :sonInfo="sonInfo" sex="1"/> props: ["sonInfo", "sex"]单向数据流Vue2-父子组件传值(vue父子组件如何传递数据)

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。 额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

官方这段话表明了,我们对于父组件传过来的值最不要直接修改,官方例举了两个常用的变更案例 1.这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用

props: ['initialCounter'],data: function () { return { counter: this.initialCounter }}

2.这个 prop 以一种原始的值传入且需要进行转换

props: ['size'],computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }}类型校验

之前我们使用字符串数组形式列出的 prop,父组件不知道子组件prop值的类型,可能传值的时候传错,所以我们可以给值指定类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你

Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].includes(value) } } }})

当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告

子向父通信问题描述

既然父可以向子传值,那么子是否可以通信父呢?当然可以,这时候我们要借助vue的emit和emit和emit和on,下面我们看代码:

解决方案

子组件

<template> <div class="son"> 这里是子组件 <button @click="emit">使用emit向父组件通信</button> </div></template><script>export default { name: "son", methods:{ emit(){ this.$emit('sayHi',"tom") } }}</script><style scoped>.son { margin: 10px; border: 1px solid red;}</style>

父组件

<template> <div class="father"> 这里是父组件 <son sex="1" @sayHi="sayHi"/> </div></template><script>import son from "@/components/son";export default { name: "father", components: { son }, data() { return {} }, methods: { sayHi(name) { console.log("sayHi:"+name) } }}</script><style lang="css">.father { border: 1px solid black;}</style>

测试 点击按钮,控制台输出sayHi tom

分析

这里首先介绍一下vue提供的两个重要函数emit和on

on

监听当前实例上的自定义事件。事件可以由 $emit 触发。回调函数会接收所有传入事件触发函数的额外参数。 上述例子的 @sayHi="sayHi"就是在监听sayHi事件,这里采用了简写形式,完整形式是v-on:sayHi=“sayHi”,我们平时用的比较多的就是监听点击事件,而这里我们就是监听了我们自定义的事件

emit

触发当前实例上的事件。附加参数都会传给监听器回调。 当我们监听了自定义事件,我们就可以在子组件中触发事件,this.$emit(‘sayHi’,“tom”),这样就会调用监听的回调函数,并且将附加参数tom传入回调函数

非父子通信

除了上述的父子组件通信,我们最后还可以在非父子组件之间传值,某些场景下会用到。下面看代码: 事件总线

import Vue from "vue";export default new Vue;

组件B

<template> <div> 组件B {{ value }} </div></template><script>import bus from "@/components/bus";export default { name: "ComponentB", data() { return { value: "oldVal" } }, created() { bus.$on("changeVal", newVal => { this.value = "newVal" }) }}</script><style scoped></style>

组件A

<template> <div> 组件A <button @click="communicate">组件A->组件B</button> </div></template><script>import bus from "@/components/bus";export default { name: "ComponentA", methods:{ communicate(){ bus.$emit("changeVal","newVal") } }}</script><style scoped></style>

测试 组件B的值由oldVal->newVal

分析

这里引入了事件总线(event bus)的概念,事件总线:事件发送者将事件消息发送到一个事件总线上,事件订阅者向事件总线订阅和接收事件,然后再处理接收到的事件 而我们这里的事件总线的载体就是一个Vue的实例对象,因为在emit和on都是Vue的一个实例方法。 当然我们还可以使用$attrs / listeners来实现类似效果,这里就不多做介绍了,有兴趣的读者可以自行了解 但是如果学过Vuex的话,利用Vuex来传值会很方便,Vuex之后会慢慢讲,不急。学习是个漫长的过程,慢慢来

由于作者能力有限,若有错误或者不当之处,还请大家批评指正,一起学习交流!

本文链接地址:https://www.jiuchutong.com/zhishi/300798.html 转载请保留说明!

上一篇:JavaScript基础知识总结 14:学习JavaScript中的File API、Streams API、Web Cryptography API(javascript基础书)

下一篇:微前端(无界)(什么是微前端)

  • iqoo8怎么设置主题(iqoo3怎么设置主页面)

    iqoo8怎么设置主题(iqoo3怎么设置主页面)

  • 小米cc9能用27w的充电器吗(小米cc9支持27w)

    小米cc9能用27w的充电器吗(小米cc9支持27w)

  • 苹果跟华为能互相定位吗(苹果跟华为能互相定位吗,但是对方会发现定位吗)

    苹果跟华为能互相定位吗(苹果跟华为能互相定位吗,但是对方会发现定位吗)

  • 抖音怎么为主播点赞(抖音怎么为主播加积分)

    抖音怎么为主播点赞(抖音怎么为主播加积分)

  • 华为查询保修期和激活时间(华为查询保修期查询)

    华为查询保修期和激活时间(华为查询保修期查询)

  • qq群主能看到谁下载文件吗(qq群主能看到谁转发文件吗)

    qq群主能看到谁下载文件吗(qq群主能看到谁转发文件吗)

  • 更新驱动有什么作用(更新驱动有什么坏处)

    更新驱动有什么作用(更新驱动有什么坏处)

  • 显示器与主机有几根线(显示器与主机有没有不兼容)

    显示器与主机有几根线(显示器与主机有没有不兼容)

  • 数据库与文件系统根本区别(数据库系统与文件)

    数据库与文件系统根本区别(数据库系统与文件)

  • 微信打视频电话为什么没有显示(微信打视频电话耗流量大吗)

    微信打视频电话为什么没有显示(微信打视频电话耗流量大吗)

  • 怎样用微信交医保步骤(怎样用微信交医疗保险费2020年)

    怎样用微信交医保步骤(怎样用微信交医疗保险费2020年)

  • 手机qq群匿名怎么设置(手机qq群匿名怎么关掉)

    手机qq群匿名怎么设置(手机qq群匿名怎么关掉)

  • 华为p30怎么打拼音声调(华为p30手机拼图怎么拼图)

    华为p30怎么打拼音声调(华为p30手机拼图怎么拼图)

  • b站直播怎么关掉礼物(b站直播怎么关闭麦克风)

    b站直播怎么关掉礼物(b站直播怎么关闭麦克风)

  • 前程无忧怎么注销邮箱(前程无忧怎么注销手机号)

    前程无忧怎么注销邮箱(前程无忧怎么注销手机号)

  • 云闪付红包怎么用(云闪付红包怎么提现到银行卡)

    云闪付红包怎么用(云闪付红包怎么提现到银行卡)

  • 电脑方向反了怎么办(电脑方向变了怎么调)

    电脑方向反了怎么办(电脑方向变了怎么调)

  • 抖音里视频和照片怎么同时进行(抖音里视频和照片不一样)

    抖音里视频和照片怎么同时进行(抖音里视频和照片不一样)

  • 云同步在哪里打开(云同步在哪里打开 华为)

    云同步在哪里打开(云同步在哪里打开 华为)

  • 手机QQ资料怎么变空白(手机qq资料怎么弄空白)

    手机QQ资料怎么变空白(手机qq资料怎么弄空白)

  • 铅酸改锂电要注意(铅酸 改锂电)

    铅酸改锂电要注意(铅酸 改锂电)

  • 显卡风扇不转电脑黑屏(显卡风扇不转电脑黑屏键盘灯不亮)

    显卡风扇不转电脑黑屏(显卡风扇不转电脑黑屏键盘灯不亮)

  • Windows Server 2003 SP2 企业安装版 Y1.0下载(windowsserver2003设置用户密码)

    Windows Server 2003 SP2 企业安装版 Y1.0下载(windowsserver2003设置用户密码)

  • 有关docxtemplater的知识(有关厉元朗的小说)

    有关docxtemplater的知识(有关厉元朗的小说)

  • CBAM——即插即用的注意力模块(附代码)(即插即用是什么意思?)

    CBAM——即插即用的注意力模块(附代码)(即插即用是什么意思?)

  • c语言中assert函数是什么(c语言asc函数)

    c语言中assert函数是什么(c语言asc函数)

  • 劳务派遣公司如何收费
  • 一般纳税人纳税申报时间
  • 印花税什么时候开始计入税金及附加
  • 残疾人保障金的计算方法
  • 结构性存款需要缴纳增值税吗
  • 事业单位私车公用条例
  • 供暖企业收取的容量热价费怎么计入收入
  • 不得抵扣的进项税额转出会计分录
  • 红字使用禁忌
  • 关税如何征收
  • 材料税款抵扣
  • 什么费用计入什么科目
  • 公对公转账银行拒绝是什么意思
  • 税务管理相关知识
  • 营改增后小规模纳税人税率是多少
  • 水利建设基金怎么计提
  • 增值税附表三怎么填 举例说明
  • 房屋转租收入会计分录
  • 购车保险属于什么费用
  • 税务总局关于四流一致解答
  • 公司注销其他应收款怎么冲平
  • 转让投资性房地产收到售价款
  • 无线路由器1200m覆盖范围
  • 贸易公司出口是什么意思
  • linux文件权限控制
  • php字符串定义的三种方式
  • PHP:session_cache_limiter()的用法_Session函数
  • launcher process
  • 长期待摊费用如何结转
  • 多源传感器融合
  • 非货币性资产交换以公允价值为基础进行计量
  • laravel搭建
  • 国有土地租赁合同规定多少年
  • 安卓跑ubuntu
  • 商品流通企业的经营过程分为
  • 销售方运输发票怎么做账?
  • 白酒赠送消费税计算
  • js获取当前日期的函数
  • 免税是政府补助吗
  • "设计"
  • 销售折让销货方式有哪些
  • 微信小程序详细教程
  • ts与js的优缺点
  • 小企业会计准则应付税款法
  • 合同发票收款付款管理系统源码
  • 技术服务的范围
  • 企业的工会经费可以用于什么地方
  • 织梦下载站源码带采集
  • 以非货币性资产对外投资会计处理
  • 免征企业所得税的有哪些行业
  • 准则规定的内容是
  • 股东有本金偿还的权利吗
  • 以经营房产投资合营收固定收益如何开发票?
  • 企业哪些行为是违法的
  • 发行股票支付给证券商的费用计入哪
  • 记账凭证核算形式
  • 委托代销安排的迹象有哪些
  • 实收资本印花税最新政策2023年
  • 销售返现如何做账务处理
  • 公司清算后能不能转让
  • 财政非税收入支付平台
  • 如何计算税前工资
  • 其他综合收益不影响当期损益
  • 出租车票没有发票怎么办
  • 摊余成本计入哪里
  • sqlserver批量备份数据库
  • MySQL Semisynchronous Replication介绍
  • 关于数据库连接池,下列说法错误的是
  • mysql 修改配置
  • xp禁用win键
  • linux防御
  • win8截屏在哪个文件夹
  • 苹果系统安装系统
  • 电脑windows7打不开怎么办
  • win7系统本地连接图标不见了
  • win8怎样设置将文件保存到d盘
  • Android OpenGL ES(七)----理解纹理与纹理过滤
  • jquery判断控件是否存在
  • node.js中的http.get方法使用说明
  • python with 用法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设