浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热。
Github:https://github.com/Ewall1106/mall(请选择分支chapter23)
1、父组件向子组件传值
(1)第一个就是要明白怎么在父页面中向子组件中传值?
- 你可以给子组件传入一个静态的值:

- 但我们一般都是需要传动态的值,所以需要v-bind绑定:

当然,你传的值可以是数字、对象、数组等等,参见vue官网。
(2)第二个就是要知道如何在子组件中接受父页面传过来的值,有几点需要了解:
组件实例的作用域是孤立的;
子组件要显式的用
props
选项声明它预期的数据,如:
// 某个子组件中:
export default {
props: {
title: {
type: String,
default: 'hello world'
}
}
}
然后就可以在页面中使用了,具体我们在项目中体现。
以上就是
单向数据流
的一般表现了: 父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
2、子组件向父组件传值
那么我们延伸一下,子组件怎么向父组件传值?
(1)基本概念
- 在Vue中,父子组件的关系可以总结为
prop
向下传递,事件
向上传递。父组件通过prop
给子组件下发数据,子组件通过事件
给父组件发送信息。

- 每个Vue实例都实现了事件接口:使用
$on(evntName)
监听事件;使用$emit(eventName,optionalPayload)
触发事件。另外,父组件可以在使用子组件的地方直接用v-on
来监听子组件触发的事件。
(2)举例说明
- 父组件在组件上定义了一个自定义事件
childFn
,事件名为parentFn
用于接受子组件传过来的message
值。
<!-- 父组件 -->
<template>
<div class="test">
<test-com @childFn="parentFn"></test-com>
<br/>
子组件传来的值 : {{message}}
</div>
</template>
<script>
export default {
// ...
data: {
message: ''
},
methods: {
parentFn(payload) {
this.message = payload;
}
}
}
</script>
- 子组件是一个
buttton
按钮,并为其添加了一个click
事件,当点击的时候使用$emit()
触发事件,把message
传给父组件。
<!-- 子组件 -->
<template>
<div class="testCom">
<input type="text" v-model="message" />
<button @click="click">Send</button>
</div>
</template>
<script>
export default {
// ...
data() {
return {
// 默认
message: '我是来自子组件的消息'
}
},
methods: {
click() {
this.$emit('childFn', this.message);
}
}
}
</script>
- 这样我们就基本实现了子组件向父组件发送值了。
大家可以在git仓库(chapter23)中于test.vue
和testCom.vue
这两个组件查看具体的代码。


3、小结
通过"props down , events up"
我们就简单的实现了父子组件之间的双向传值,这是很基本的知识点,其它还有$invoke等等方法,大家可以去官网好好看看。
关于通信和状态管理就必须了解vuex
了,后面我们在项目中当涉及了再好好讲。
参考学习
https://cn.vuejs.org/v2/guide/components-props.html
浅谈vue父子组件之间的传值的更多相关文章
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- vue父子组件之间相互传值
1. 子组件使用父组件方法,并向父组件传值 子组件代码 <template> <div class="menu"> <div class=" ...
- vue父子组件之间的传值
引入组件 父组件 <div> <form-edit></form-edit> </div> import FormEdit from "路径& ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- vue 非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- vue学习--组件之间的传值方式
1.概述 vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的 2.父子组件之间传值 --props和$emit 父传子:通过props 方法:子组件:props:['m ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
随机推荐
- docker配置Nginx
创建及进入docker容器$docker run -p 80 --name web01 -i -t ubuntu /bin/bash 创建html文件夹$mkdir -p /var/www/html ...
- LNMP小项目搭建,Centos7.6环境搭建Linux+nginx+mysql+php,wordpress个人博客的搭建(完整搭建步骤)
一.LNMP搭建,基于nginx服务器搭建wordpress个人博客 准备环境:centos7.6环境下web服务器(nginx+php):主机名:web01,ip:192.168.248.172my ...
- Linux-date函数
rhel7 date函数 显示本地时间?设定当前系统的时间,以一定格式显示当前时间,如X-X-X /X:X:X 使用man date命令查看关于date的使用方法 SYNOPSIS ...
- Git之旅(1):安装git
一.在windows中安装git git官网:https://git-scm.com/downloads 二.在centos系统安装git 2.1 配置base源和epel源 # cat /etc/y ...
- 微信公众号接口类(PHP版本)
[项目需求] 通过微信提供的接口,实现微信公众号与后端的应用程序数据交互.消息响应等功能. [项目疑难点] 理解接口工作方式,统一接口API,响应速度.安全性等 [代码举例] WeixinAp ...
- python基本数据类型常用方法
python基本数据类型 1.整型 1.1 int 1.2 bit_lenght # 当前数字的二进制位数,至少用n位表示 r = age.bit_length() >>> a = ...
- 常见BUG
1.没有配置Tomcat服务,由于 <exclusions> <exclusion> <groupId>org.springframework.boot</g ...
- hadoop中yarn
一.yarn的概述 Apache Yarn(Yet Another Resource Negotiator的缩写)是hadoop集群资源管理器系统,Yarn从hadoop 2引入,最初是为了改善Map ...
- 安装mod_rpaf让apache获取访客真实IP
安装mod_rpaf让apache获取访客真实IP 安装mod_rpaf让apache获取访客真实IP 作者:朱 茂海 /分类:Apache 字号:L M S mod_rpaf是apache ...
- tomcat的内存配置
WEB站点在跑安全测试时,跑一会儿就连接不上,考虑是否是tomcat内存溢出问题. Linux环境,修改Tomcat的内存配置: 修改bin/catalina.sh文件,在cygwin=false前面 ...