NO--16 vue之父子组件传值
先创建项目并运行
vue init webpack-simple template
cd template
npm i
npm run dev
一、子组件访问父组件的数据
方式一 :子组件直接访问父组件的数据
- 父组件在调用子组件时,绑定想要获取的父组件中的数据
- 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
创建如下目录

App.vue 中写入
<template>
<div class="hello">
<h3>我是 App 父组件</h3>
<h4>访问自己的数据:{{msg}},{{name}},{{user.id}}</h4>
<hr>
<!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->
<Hello :message="msg" :name="name" :user="user"></Hello>
</div>
</template>
<script>
// 引入 Hello 组件
import Hello from './assets/components/Hello.vue'
export default {
data(){
return {
msg:'父组件',
name:'tom',
age:'22',
user:{
id:1234,
userName:'Jack'
}
}
},
// 注册 Hello 组件
components:{
Hello
}
}
</script>
Hello.vue 文件中写入
<template>
<div class="hello">
<h3>我是 hello 子组件</h3>
<!-- 在页面中直接渲染即可 -->
<h4>访问父组件中的数据: {{message}},{{name}},{{user.id}}</h4>
</div>
</template>
<script>
export default {
// 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
props:['message','name','user']
}
</script>
最后效果:

方式二 :为组件的 prop 指定 验证 规则,如果传入的数据不符合要求,Vue 会发出警告
- 父组件在调用子组件时,绑定想要获取的父组件中的数据
- 在 props 内以对象的形式写入校验规则
App.vue 中写入
<template>
<div class="hello">
<h3>我是 App 父组件</h3>
<h4>访问自己的数据:{{msg}},{{name}},{{user.id}}</h4>
<hr>
<!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->
<Hello :message="msg" :name="name" :age="age" :user="user" :money="money"></Hello>
</div>
</template>
<script>
// 引入 Hello 组件
import Hello from './assets/components/Hello.vue'
export default {
data(){
return {
msg:'父组件',
name:'tom',
age:'22',
user:{
id:9876,
userName:'Jack'
},
money:'123'
}
},
// 注册 Hello 组件
components:{
Hello
}
}
</script>
Hello.vue 中写入
<template>
<div class="hello">
<h3>我是 hello 子组件</h3>
<!-- 在页面中直接渲染即可 -->
<h4>访问父组件中的数据:
{{message}} <br>
{{name}}<br>
{{user.id}}<br>
{{user.userName}}<br>
{{age}}<br>
{{ageOne}}<br>
{{money}}<br>
</h4>
</div>
</template>
<script>
export default {
props:{
// 基础类型检测 (`null` 指允许任何类型)
message:String,
// 可能是多种类型
name:[String,Number],
// 必传且是字符串
age:{
type:String,
required:true
},
// 数值且有默认值 如果父组件中没有该数据绑定,显示以下的默认值
ageOne:{
type: Number,
default: 10
},
// 数组/对象的默认值应当由一个工厂函数返回
user:{
type:Object,
default:function(){
return {
userName: 'Doctor'
}
}
},
// 自定义验证函数
money:{
validator:function(value){
return value > 100
}
}
}
}
</script>
效果如下

注意:Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
二、父组件访问子组件的数据
- 在子组件中使用 $emit(事件名,数据) 触发一个自定义事件发送数据
- 在父组件在使用子组件的标签内监听子组件的触发事件,并在父组件中定义方法用来获取数据
在 Hello.vue 中写入
<template>
<div class="hello">
<h3>我是 hello 子组件</h3>
<h4>访问自己的数据:
{{msg}} <br>
{{name}}
</h4>
<!-- 触发 send 事件 ,发送数据 -->
<button @click="send">将子组件中的数据发送给父组件</button>
</div>
</template>
<script>
export default {
data(){
return {
msg:'子组件',
name:'tom'
}
},
methods:{
// 在此处定义事件,用来发送数据,也可直接写到 mounted 内自动发送
send(){
// 此处的 this 表示当前子组件的实例
this.$emit('hello',this.msg,this.name)
}
}
}
</script>
在 App.vue 中写入
<template>
<div class="hello">
<h3>我是 App 父组件</h3>
<!-- 6. 在页面中渲染 -->
<h4>访问子组件的数据:{{msg}},{{name}}</h4>
<hr>
<!-- 子组件 -->
<!-- 3. 在子组件标签内监听子组件事件的触发 -->
<Hello @hello="getData"></Hello>
</div>
</template>
<script>
// 引入 Hello 组件
import Hello from './assets/components/Hello.vue'
export default {
data(){
return {
// 4. 初始化数据对象
msg:'',
name:'',
}
},
methods:{
// 5. 接收子组件传过来的数据
getData(msg,name){
this.msg = msg,
this.name = name
}
},
// 注册 Hello 组件
components:{
Hello
}
}
</script>
效果图:

NO--16 vue之父子组件传值的更多相关文章
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- Vue非父子组件传值
<template> <div id="app"> <v-home></v-home> <br> <hr> ...
- vue 中父子组件传值:props和$emit
更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...
- vue中父子组件传值问题 通过props 和 $emit()方法
(代码在最后) 1.父组件给子组件传值直接通过props,听着很简单,但是对于初学者来说还是比较难以理解的,今天小白通过自己的实践操作结合代码分析一下 案例 把模态框单独的抽离出来,当作一个组件 第 ...
- vue ref父子组件传值
一. ref使用在父组件上 父组件html: <information ref='information'></information> import information ...
- Vue组件传值(二)之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
随机推荐
- 【译文】MySQL InnoDB 事物模型
InnoDB事物模型 事物的隔离级别 自动提交,提交和回滚 一致的非锁定读 锁定读 在InnoDB事物模型中,目标是为了多版本数据库和传统的俩段锁协议的最佳实践(多版本并发控制).InnoDB在行级别 ...
- 1060. [ZJOI2007]时态同步【树形DP】
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数 字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路 ...
- [AHOI2009]最小割
题目 最小割的可行边和必须边 可行边\((u,v)\)需要满足以下两个条件 满流 残量网络中不存在\(u\)到\(v\)的路径 这个挺好理解的呀,如果存在还存在路径的话那么这条边就不会是瓶颈了 必须边 ...
- msf后渗透
生成exe后门 msfvenom -p windows/meterpreter/reverse_tcp lhost=192.168.31.131 lport=4444 -f exe -o 4444.e ...
- ethereumjs/ethereumjs-account-2-test
ethereumjs-account/test/index.js const Account = require('../index.js') const tape = require('tape') ...
- bn两个参数的计算以及layer norm、instance norm、group norm
bn一般就在conv之后并且后面再接relu 1.如果输入feature map channel是6,bn的gamma beta个数是多少个? 6个. 2.bn的缺点: BN会受到batchsize大 ...
- python list 使用技巧
格式:list[start:stop:step] 示例:a =list(range(0,10))print(a[1:8:2]) #[1, 3, 5, 7]print(a[:8:2]) #[0, 2, ...
- Python中乘法
1.numpy乘法运算中"*"或multiply(),是数组元素逐个计算,具体代码如下: import numpy as np # 2-D array: 2 x 3 two_dim ...
- Kafka设计解析(七)Kafka Stream
转载自 技术世界,原文链接 Kafka设计解析(七)- Kafka Stream 本文介绍了Kafka Stream的背景,如Kafka Stream是什么,什么是流式计算,以及为什么要有Kafka ...
- Flume性能测试报告(翻译Flume官方wiki报告)
因使用flume的时候总是会对其性能有所调研,网上找的要么就是自测的这里找到一份官方wiki的测试报告供大家参考 https://cwiki.apache.org/confluence/display ...