vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题
首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)
环境搭建步骤:
- 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行
- vue init webpack vue-demo 这是vue基于webpack的模板项目
- cd vue-demo 进入vue-demo文件夹
- npm install 安装package.json中依赖的node_modules
- npm run dev 运行该项目
刚刚我们创建的是vue基于webpack工具的一个模板项目,对于webpack和热加载这些不熟悉的同学不必在意,我们现在不会过多关注webpack的,不过建议对vue有兴趣的同学还是去了解一下webpack,它也算是vue开发中的一个必备工具
接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样
一.父组件向子组件传值
1.创建子组件,在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props,然后创建一个名为message的属性
3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值
4.保存修改的文件,查看浏览器
5.我们依然可以对message的值进行v-bind动态绑定
此时浏览器中
父组件向子组件传值成功
总结一下:
- 子组件在props中创建一个属性,用以接收父组件传过来的值
- 父组件中注册子组件
- 在子组件标签中添加子组件props中创建的属性
- 把需要传给子组件的值赋给该属性
二.子组件向父组件传值
1.在子组件中创建一个按钮,给按钮绑定一个点击事件
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
4.保存修改的文件,在浏览器中点击按钮
子组件向父组件传值成功
总结一下:
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了
vue2.0 子组件和父组件之间的传值相关推荐
- vue中组件之间调用方法——子组件调用父组件的方法 父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
- vue3.0 子组件调用父组件中的方法
在vue2中,子组件调用父组件,直接使用this.$emit()即可. 但是在vue3中,很显然使用this.$emit() 已经开始报错了,为什么会报错呢? 原因是:在vue3中setup是在声明周 ...
- vue3.0子组件向父组件传值-发布订阅者模式
子组件向父组件传值-context.emit 子组件向父组件传值 context.emit 子组件向父组件传值 context.emit 子组件中: 将数据terminationOpinion传给父组 ...
- vue子组件和父组件之间传值方法
父组件向子组件传值(prop-主要用于传递数据) 父组件向子组件传值分为两步: 1.父组件动态绑定一个需要传递的值 2.子组件在props属性中获取到父组件中传递的值,并使用 例子 父组件: 在父组件 ...
- vue父子之间传值 子组件向父组件传值或父组件向子组件传值
1.父组件向子组件传值 使用prop 在子组件中定义 props: {visible: {type: Boolean,default: false},ShopListData: {type: Arra ...
- vue2.0笔记《二》组件
主要内容:如何注册组件.如何使用组件.父组件子组件之间值的传递.具名插槽 1.如何注册组件 第一步:通过import将子组件载入父组件的js中 // 第一步:通过import将子组件载入父组件的js中 ...
- Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
- 组件间数据交互——父组件向子组件传值( props属性值类型) 子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法"问题疑问,本网通过在网上对" (v ...
最新文章
- 博客园今天早上是不是出现什么问题了?
- PHP中的静态属性、静态方法、常量属性
- 关于OnTouchListener的深入理解
- RabbitMQ的四种交换机
- mysql 5.6 双向互备_mysql双主互备
- swift5.x基础知识入门
- NO.1_python_scrapy组成爬取多页数据连接数据库配置文件书写
- linux英文安装教程图解,Linux安装中英文对照小手册
- Microsoft Project 2010
- NVIDIA TK1 刷机记录(1)ubuntu 14.04
- Vanguard集团在美上市ETF资产超8700亿美元
- Blazeds文档(二)-------Blazeds体系结构(一)【转载】
- python实现英文新闻摘要自动提取_自然语言处理之自动摘要
- Latex/CTex/WinEdt常见错误“! Improper alphabetic constant.”
- 运行时设置数据库连接字符串
- 动态红包封面来了,特效拉满超炫酷
- 2、java语言基础课程2
- mysqldump 备份详解
- 使用instantclient_19客户端(免安装)远程连接Oracle服务器端数据库
- ConcurrentHashMap原理,在JKD7和JDK8版本的区别
热门文章
- java数据类型_Java 变量、表达式和数据类型详解
- python怎么安装tensorflow-Python使用pip安装TensorFlow模块
- c iostream.源码_通达信常用指标:「金手指 」指标源码
- 实验楼 “python3简明教程” 挑战三:玩转函数
- python 用命令安装pip_利用Python的pip命令安装nump
- Cadence Orcad元器件位号重排与原理图页序号重排
- angularjs 获取复选框的值_哈迪斯仙酒有什么用 哈迪斯仙酒获取方式以及作用一览...
- 决策类AI成最具商业价值应用产品 第四范式入选Gartner中国5大代表厂商
- codeforces 7.22 F Pairwise Modulo
- 【机器学习】全面归纳距离和相似度方法(7种)