vuejs — 父组件向子组件传值(父传子)「建议收藏」

vuejs — 父组件向子组件传值(父传子)「建议收藏」来看一下vue中的父组件向子组件传值的过程:首先,举个例子:有子组件—-A.vueB.vueC.vueA.vue中有一个数组-》listArr,这个数组在B.vue和C.vue中也要用到,每个页面都去写listArr数组,比较麻烦那怎么用简单…

大家好,又见面了,我是你们的朋友全栈君。

来看一下vue中的父组件向子组件传值的过程:

(父组件)向(子组件)传值,那么子组件需要一个属性接收,大家应该都知道,使用 props 来接收;

举个例子:

                  有子组件 —- A.vue(父组件)    B.vue(子组件)    C.vue(子组件)

                  A.vue中有一个数组-》listArr,这个数组也是B.vue 和  C.vue 的需要的数据,每个页面都去写listArr数组,比较麻烦,

                  那怎么用简单方便的方法实现这个效果呢???

                  可以将这个数组,提出来放到父组件中,谁要用父组件就传给谁。

 

父组件向子组件传值,属于 属性传值

props是子组件访问父组件数据的唯一接口.

单向数据流: props是单向绑定的

当父组件的属性变化时,将传导给子组件,但是反过来不会。

每次父组件更新时,子组件的所有 props 都会更新为最新值。

不要在子组件内部改变 props。如果你这么做了,Vue 会在控制台给出警告。

 

下面来看一下示例:

组件Users.vue,在App.vue中引用,此时数组users在子组件中,如图所示

vuejs --- 父组件向子组件传值(父传子)「建议收藏」

 

but,该数组users,子组件HelloWorld.vue中也要用到,下面将数组Users提出,放到父组件App.vue中,

-》看一下添加了数组Users的父组件App.vue,

我们思考:父组件、子组件之间有关联的地方是什么,没错,就是在调用子组件的时候,即下图中的<Users></Users>,我们用v-bind:属性=”所传的值” 动态绑定。

 

vuejs --- 父组件向子组件传值(父传子)「建议收藏」

 

那如何将父组件的users数组传给子组件呢???

在子组件Users.vue,通过 -》props 属性接收父组件所传的数组 -》users

如下图所示:

vuejs --- 父组件向子组件传值(父传子)「建议收藏」

 

如此,便是父传子了。:)

 

 

 

 

———>   为加深印象而写,如有不妥,欢迎留言。:)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143814.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • QStringList用法总结

    QStringList用法总结QStringList继承自QList,提供了一个QString的List;同QList一样,QStringList也是隐式数据共享的,并且支持按索引访问及快速插入、删除元素的操作。所有QList支持的操作都可用于QStringList,同时QStringList在此基础上提供了一些便于操作QString的功能。1.QStringList的构造函数及析构函数构造函数:a.QSt

  • 创建线程池的方法_java引用就是对象本身

    创建线程池的方法_java引用就是对象本身创建线程池的方法一、创建线程池的三种方法Executors.newSingleThreadExecutor();//单个线程Executors.newFixedThreadPool(5);//创建一个固定的线程池Executors.newCachedThreadPool();//创建一个可伸缩的线程池1.newSingleThreadExecutorimportjava.util.concurrent.ExecutorService;importjava.util.concurr

  • Linux Vi 文本编辑器常用命令

    Linux Vi 文本编辑器常用命令*LinuxVi文本编辑器常用命令**引言:在Linux中我们常用的文本编辑器有Vi,Vim(Vi的增强版)。而且vi编辑器不仅仅是适用于Linux,它是所有Unix以及Linux系统下的标准编辑器,几乎适用于Unix、Linux系统的所有版本。vi或vim虽然没有Windows操作系统中的图形界面编辑器那样点鼠标的简单操作,但vi编辑器在系统管理、服务器管理字符界面中,永远不是图形界面的编辑器能比的。它能轻易地创建和修改文本文件,维护Linux系统中的配置文件。其实刚开始的时候我也觉得很不习…

  • 给Android程序猿的六个建议

    给Android程序猿的六个建议

  • 宿主机访问容器ip_docker宿主机和容器

    宿主机访问容器ip_docker宿主机和容器参考文章:从容器中获取宿主机IP地址背景:docker中的程序需要连接外部的程序,连接的过程中会告知外部程序自己的ip地址,然后外部的程序会回连docker中的程序。由于docker使用的是rancher中的托管模式,外部程序是没办法直接连接到容器中的,那么如何解决呢?1、将主机/proc目录挂载到容器中-v/proc:/hostip/:ro2、运行docker的时候添加主机完全访问权限–privileged3、在容器中运行命令#获取网络信息需要指定.

  • 微信小程序反编译教程(微信小程序反编译得到的是html)

    准备环境:Node.js环境8.10.0(本人正在使用版本)下载地址npm5.6.0(本人正在使用版本)(安装NodeJs白送npm)微信web开发工具下载地址安卓模拟器(安装完就已刷root)(MuMu模拟器–当时为了打游戏才下载的,这真的是一个游戏模拟器_(:з」∠)_)下载地址Github作者qwerty472123的反编译工具Git项目地址1.下载Git项…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号