一、组件间通信传值的各种方式与场景
1、父组件向子组件(跨级)传值
1.1 父组件通过props给子组件传值
props也可以传函数
image.png
// 父组件vue文件
<template>
<div class="home">
<!--父组件传msg属性给子组件传值-->
<child :msg="msg"></child>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Father',
components: {
Child
},
data () {
return {
msg: '父组件传给子组件的值'
}
},
methods: {}
}
</script>
// 子组件
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
name: 'Child',
// 子组件通过props接收父组件的传值
props: ['msg']
}
</script>
<style scoped>
</style>
1.2 父组件通过$ref给子组件传值
ref 用于给元素或子组件注册引用信息，引用信息将会注册在父组件的 refs 对象上，父组件通过refs对象上，父组件通过ref 获取到在子组件里定义的属性和方法，通过调用方法给子组件传递数据
image.png
// 父组件
<template>
<div class="home">
<!--父组件传msg属性给子组件传值-->
<child ref="child"></child>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Father',
components: {
Child
},
data () {
return {
msg: '父组件传给子组件的值'
}
},
mounted () {
// 父组件通过ref属性调用子组件的方法
this.$refs.child.getMsg(this.msg)
},
methods: {}
}
</script>
// 子组件
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
name: 'Child',
data () {
return {
msg: ''
}
},
methods: {
// 子组件获取父组件值的方法
getMsg (val) {
this.msg = val
}
}
}
</script>
<style scoped>
</style>
1.3 父组件通过$children给子组件传值
children为当前组件的直接子组件，是一个无序的数组，父组件通过 children 访问子组件并传递数据，$ children 并不保证顺序，也不是响应式的，如果能清楚的知道子组件的顺序，可以使用下标来操作对应的子组件
image.png
// 父组件
<template>
<div class="home">
<!--父组件传msg属性给子组件传值-->
<child ref="child"></child>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Father',
components: {
Child
},
data () {
return {
msg: '父组件传给子组件的值'
}
},
mounted () {
// 父组件通过$children[0]访问对应子组件
this.$children[0].msg = this.msg
},
methods: {}
}
</script>
// 子组件
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
name: 'Child',
data () {
return {
msg: ''
}
}
}
</script>
<style scoped>
</style>
1.4 父组件通过provide/inject给子孙组件传值
provide/inject 组合以允许一个祖先组件向其所有子孙后代组件注入一个依赖（属性和方法），不论组件层次有多深，并在其上下游关系成立的时间里始终生效，从而实现跨级父子组件通信，主要在开发高阶插件/组件库时使用
image.png
// 父组件
<template>
<div class="home">
<child></child>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Father',
components: {
Child
},
data () {
return {}
},
// 父组件通过provide方法向子孙组件提供值
provide () {
return {
msg: '父组件传给子组件的值'
}
}
}
</script>
// 子组件
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
name: 'Child',
// 子孙组件通过inject注入父组件提供的值
inject: ['msg'],
data () {
return {
}
}
}
</script>
<style scoped>
</style>
总结：props和$ref和 $children和provide/inject的主要区别：
- props 侧重于数据的传递，并不能获取子组件里的属性和方法，适用于自定义内容的使用场景
-
$ref侧重于获取子组件里的属性和方法，并不是太适合传递数据，并且 ref 常用于获取dom元素，起到选择器的作用 -
$children侧重于获取所有的直接子组件，得到的是一个无序的数组，并不太适合向多个子组件传递数据 - provide/inject 侧重于在开发高阶插件/组件库时使用，并不推荐用于普通应用程序代码中。
1.5 非prop的$attrs?inheritAttrs? 提供封装组件的可扩展性
要求第1个input输入文字，第2个input输入密码
image.png
-
设置 inheritAttrs: false
image.png -
v-bind="$attrs"
image.png -
总结
image.png
// 子组件
<template>
<div class="input-con">
<input v-bind="$attrs" :value="value" @input="$emit('input')">
$attrs接收非props传递过来的属性：{{$attrs}}，所有不包含属性 ’value‘
</div>
</template>
<script>
export default {
name: 'Child',
props: ['value'],
inheritAttrs: false // 关闭父组件传过来的属性添加到子组件的根元素
}
</script>
<style scoped>
</style>
// 父组件
<template>
<div class="home">
<!--要求第1个input输入文字-->
<!-- 第2个input输入密码-->
<child v-model="msg" type="text"></child>
<child v-model="msg" type="password"></child>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Father',
components: {
Child
},
data () {
return {
msg: '你好，孩子'
}
}
}
</script>
1.6 $listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
2、子组件向父组件(跨级)传值 $emit(自定义事件名[,...param])
2.1 子组件通过触发$emit事件给父组件传值
$emit的第一个参数为自定义的事件，第二个参数为要传递给父组件的值，父组件在子组件标签上绑定自定义事件来接收子组件传递的数据
image.png
// 子组件
<template>
<div>
<button @click="sendMsg"></button>
</div>
</template>
<script>
export default {
name: 'Child',
data () {
return {
msg: '子组件传给父组件的值'
}
},
methods: {
sendMsg () {
this.$emit('getMsg', this.msg)
}
}
}
</script>
<style scoped>
</style>
// 父组件
<template>
<div class="home">
<child @getMsg="getData"></child>
<p>{{msg}}</p>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Father',
components: {
Child
},
data () {
return {
msg: ''
}
},
methods: {
getData (data) {
this.msg = data
}
}
}
</script>
2.2 子组件通过$parent给父组件传值
$parent 可以用来从一个子组件访问父组件并传递数据
image.png
// 子组件
<template>
<div>
<button @click="sendMsg"></button>
</div>
</template>
<script>
export default {
name: 'Child',
data () {
return {
msg: '子组件传给父组件的值'
}
},
methods: {
// 子组件通过$parent访问父组件
sendMsg () {
this.$parent.msg = this.msg
}
}
}
</script>
// 父组件
<template>
<div class="home">
<child></child>
<p>{{msg}}</p>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Father',
components: {
Child
},
data () {
return {
msg: ''
}
}
}
</script>
3、兄弟组件间通信传值 vm.$emit和vm.$on
兄弟之间传值通过eventBus。
eventBus 就是一个vue实例来作为全局的事件总线，兄弟组件之间通过 eventBus. on 和 eventBus.on和eventBus.emit 注册触发事件来传递数据
image.png
// 新建一个vue实例 eventBus.js
import Vue from 'vue'
export default new Vue()
// 父组件
<template>
<div class="home">
<child></child>
<child-two></child-two>
</div>
</template>
<script>
import Child from '@/components/Child'
import ChildTwo from '@/components/ChildTwo'
export default {
name: 'Father',
components: {
Child,
ChildTwo
},
data () {
return {
msg: ''
}
}
}
</script>
// 子组件A
<template>
<div>
<button @click="sendMsg">子组件A传值给子组件B</button>
</div>
</template>
<script>
import eventBut from '@/utils/eventBut'
export default {
name: 'Child',
data () {
return {
msg: '子组件A传给子组件B的值'
}
},
methods: {
sendMsg () {
// 子组件A通过eventBus.$emit触发自定义事件给子组件B传值
eventBut.$emit('getMsg', this.msg)
}
}
}
</script>
<style scoped>
</style>
// 子组件B
<template>
<div>
{{ msg }}
</div>
</template>
<script>
import eventBut from '@/utils/eventBut'
export default {
name: 'ChildTwo',
data () {
return {
msg: ''
}
},
created () {
this.getData()
},
methods: {
getData () {
eventBut.$on('getMsg', (data) => {
this.msg = data
})
}
}
}
</script>
<style scoped>
</style>
