先创建项目并运行

vue init webpack-simple template
cd template
npm i
npm run dev

一、子组件访问父组件的数据

方式一 :子组件直接访问父组件的数据

  1. 父组件在调用子组件时,绑定想要获取的父组件中的数据
  2. 在子组件内部,使用 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 会发出警告

  1. 父组件在调用子组件时,绑定想要获取的父组件中的数据
  2. 在 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。

二、父组件访问子组件的数据
  1. 在子组件中使用 $emit(事件名,数据) 触发一个自定义事件发送数据
  2. 在父组件在使用子组件的标签内监听子组件的触发事件,并在父组件中定义方法用来获取数据

在 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之父子组件传值的更多相关文章

  1. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  2. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...

  3. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

  4. vue 中父子组件传值:props和$emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  5. vue中父子组件传值问题 通过props 和 $emit()方法

    (代码在最后) 1.父组件给子组件传值直接通过props,听着很简单,但是对于初学者来说还是比较难以理解的,今天小白通过自己的实践操作结合代码分析一下 案例  把模态框单独的抽离出来,当作一个组件 第 ...

  6. vue ref父子组件传值

    一. ref使用在父组件上 父组件html: <information ref='information'></information> import information ...

  7. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  8. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  9. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

随机推荐

  1. 【译文】MySQL InnoDB 事物模型

    InnoDB事物模型 事物的隔离级别 自动提交,提交和回滚 一致的非锁定读 锁定读 在InnoDB事物模型中,目标是为了多版本数据库和传统的俩段锁协议的最佳实践(多版本并发控制).InnoDB在行级别 ...

  2. 1060. [ZJOI2007]时态同步【树形DP】

    Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数 字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路 ...

  3. [AHOI2009]最小割

    题目 最小割的可行边和必须边 可行边\((u,v)\)需要满足以下两个条件 满流 残量网络中不存在\(u\)到\(v\)的路径 这个挺好理解的呀,如果存在还存在路径的话那么这条边就不会是瓶颈了 必须边 ...

  4. msf后渗透

    生成exe后门 msfvenom -p windows/meterpreter/reverse_tcp lhost=192.168.31.131 lport=4444 -f exe -o 4444.e ...

  5. ethereumjs/ethereumjs-account-2-test

    ethereumjs-account/test/index.js const Account = require('../index.js') const tape = require('tape') ...

  6. bn两个参数的计算以及layer norm、instance norm、group norm

    bn一般就在conv之后并且后面再接relu 1.如果输入feature map channel是6,bn的gamma beta个数是多少个? 6个. 2.bn的缺点: BN会受到batchsize大 ...

  7. 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, ...

  8. Python中乘法

    1.numpy乘法运算中"*"或multiply(),是数组元素逐个计算,具体代码如下: import numpy as np # 2-D array: 2 x 3 two_dim ...

  9. Kafka设计解析(七)Kafka Stream

    转载自 技术世界,原文链接 Kafka设计解析(七)- Kafka Stream 本文介绍了Kafka Stream的背景,如Kafka Stream是什么,什么是流式计算,以及为什么要有Kafka ...

  10. Flume性能测试报告(翻译Flume官方wiki报告)

    因使用flume的时候总是会对其性能有所调研,网上找的要么就是自测的这里找到一份官方wiki的测试报告供大家参考 https://cwiki.apache.org/confluence/display ...