Vue2父子组件传值举例详解
作者：程序员小赵OvO
前言
在日常开发中，我们经常会在一个组件中嵌套另外一个组件，那么如果我们父组件要向子组件传值该怎么办？子组件向父组件通信又该怎么办？本文将详细举例说明这些问题。
父向子通信
问题描述
现在我们有个需求，我们要分别显示父和子的信息，我们当然可以在一个组件中直接显示全部信息，但是万一以后又来一个需求：我们要在母和子的信息，那其实这里就存在冗余了，所以我们把子组件单独封装成一个新的组件。那么这里就会出现一个问题，子组件的信息该如何从父组件传过去呢？
解决方案
使用vue提供的prop属性，下面边看代码边分析：
父组件定义
<template>
<div class="father">
这里是父组件，我们会在这里展示父的信息
{{ fatherName }}
{{ fatherAge }}
<son/>
</div>
</template>
<script>
import son from "@/components/son";
export default {
name: "father",
components: {
son
},
data() {
return {
fatherName: "张三",
fatherAge: 12
}
}
}
</script>
<style lang="css">
.father{
border: 1px solid black;
}
</style>子组件定义
<template>
<div class="son">
这里是子组件，我们会在这里展示子的信息
</div>
</template>
<script>
export default {
name: "son"
}
</script>
<style scoped>
.son{
margin: 10px;
border: 1px solid red;
}
</style>使用:attribute属性向子组件传入值
<template>
<div class="father">
这里是父组件，我们会在这里展示父的信息
{{ fatherName }}
{{ fatherAge }}
<son :sonInfo="sonInfo"/>
</div>
</template>
<script>
import son from "@/components/son";
export default {
name: "father",
components: {
son
},
data() {
return {
fatherName: "张三",
fatherAge: 12,
sonInfo: {
sonName: "王小虎",
sonAge: 6
}
}
}
}
</script>
<style lang="css">
.father {
border: 1px solid black;
}
</style>
子组件通过props属性接收父组件传过来的值，这里的名字要和父组件传的值对应
<template>
<div class="son">
这里是子组件，我们会在这里展示子的信息
{{ sonInfo.sonName }}
{{ sonInfo.sonAge }}
</div>
</template>
<script>
export default {
name: "son",
props: ["sonInfo"]
}
</script>
<style scoped>
.son {
margin: 10px;
border: 1px solid red;
}
</style>测试
扩展
上述的例子解决了父子组件传值的基本问题，当然prop的用法还有很多，我们可以在vue2官网上看到
Prop的大小写
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})<!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post>
Prop 类型
我们之前使用以字符串数组形式列出的 prop
props: ["sonInfo"]
我们也可以给每一个prop指定对应的值
props: {
title: String,//字符串
likes: Number,//数字
isPublished: Boolean,//布尔
commentIds: Array,//数组
author: Object,//对象
callback: Function,//函数
contactsPromise: Promise //异步延迟对象
}传递静态或动态 Prop
之前我们传递的是动态的Prop，可以动态赋值
<son :sonInfo="sonInfo"/>
我们也可以传递静态的
<son :sonInfo="sonInfo" sex="1"/>
props: ["sonInfo", "sex"]
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
官方这段话表明了，我们对于父组件传过来的值最不要直接修改，官方例举了两个常用的变更案例
1.这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}2.这个 prop 以一种原始的值传入且需要进行转换
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}类型校验
之前我们使用字符串数组形式列出的 prop，父组件不知道子组件prop值的类型，可能传值的时候传错，所以我们可以给值指定类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].includes(value)
}
}
}
})当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告
子向父通信
问题描述
既然父可以向子传值，那么子是否可以通信父呢？当然可以，这时候我们要借助vue的 e m i t 和 emit和 emit和on，下面我们看代码：
解决方案
子组件
<template>
<div class="son">
这里是子组件
<button @click="emit">使用emit向父组件通信</button>
</div>
</template>
<script>
export default {
name: "son",
methods:{
emit(){
this.$emit('sayHi',"tom")
}
}
}
</script>
<style scoped>
.son {
margin: 10px;
border: 1px solid red;
}
</style>父组件
<template>
<div class="father">
这里是父组件
<son sex="1" @sayHi="sayHi"/>
</div>
</template>
<script>
import son from "@/components/son";
export default {
name: "father",
components: {
son
},
data() {
return {}
}, methods: {
sayHi(name) {
console.log("sayHi:"+name)
}
}
}
</script>
<style lang="css">
.father {
border: 1px solid black;
}
</style>测试
点击按钮，控制台输出sayHi tom
分析
这里首先介绍一下vue提供的两个重要函数emit和on
on
监听当前实例上的自定义事件。事件可以由 $emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
上述例子的 @sayHi="sayHi"就是在监听sayHi事件，这里采用了简写形式，完整形式是v-on:sayHi=“sayHi”，我们平时用的比较多的就是监听点击事件，而这里我们就是监听了我们自定义的事件
emit
触发当前实例上的事件。附加参数都会传给监听器回调。
当我们监听了自定义事件，我们就可以在子组件中触发事件，this.$emit(‘sayHi’,“tom”)，这样就会调用监听的回调函数，并且将附加参数tom传入回调函数
非父子通信
除了上述的父子组件通信，我们最后还可以在非父子组件之间传值，某些场景下会用到。下面看代码：
事件总线
import Vue from "vue"; export default new Vue;
组件B
<template>
<div>
组件B
{{ value }}
</div>
</template>
<script>
import bus from "@/components/bus";
export default {
name: "ComponentB",
data() {
return {
value: "oldVal"
}
}, created() {
bus.$on("changeVal", newVal => {
this.value = "newVal"
})
}
}
</script>
<style scoped>
</style>组件A
<template>
<div>
组件A
<button @click="communicate">组件A->组件B</button>
</div>
</template>
<script>
import bus from "@/components/bus";
export default {
name: "ComponentA",
methods:{
communicate(){
bus.$emit("changeVal","newVal")
}
}
}
</script>
<style scoped>
</style>测试
组件B的值由oldVal->newVal
分析
这里引入了事件总线（event bus）的概念，事件总线：事件发送者将事件消息发送到一个事件总线上，事件订阅者向事件总线订阅和接收事件，然后再处理接收到的事件
而我们这里的事件总线的载体就是一个Vue的实例对象，因为在emit和on都是Vue的一个实例方法。
当然我们还可以使用$attrs / listeners来实现类似效果，这里就不多做介绍了，有兴趣的读者可以自行了解
但是如果学过Vuex的话，利用Vuex来传值会很方便，Vuex之后会慢慢讲，不急。学习是个漫长的过程，慢慢来
总结
到此这篇关于Vue2父子组件传值的文章就介绍到这了,更多相关Vue2父子组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！