Vue 组件间传值
父组件传给子组件
在Children.vue 里定义一个props：
// props 数据类型props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
//定义可以基本类型，也可以是对象
props:{
title: String,
msg: {type: String, default: ‘hello world’}
}
Parent.vue
<template><div class="parent">
<Children :msg="message"></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children
},
data() {
return {
message:'hello world'
}
},
}
</script>
子组件传给父组件
这里需要使用自定义事件，在子组件中使用this.$emit(‘myEvent’) 触发，然后在父组件中使用@myEvent监听。
Children.vue
<template><section>
<br>
<div @click="clickme">click me</div>
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
childNum:0
}
},
methods: {
clickme(){
// 通过自定义事件addNum把值传给父组件
this.$emit('addNum',this.childNum++)
}
}
}
</script>
Parent.vue
<template><div class="parent">
这里是计数：{{parentNum}}
<Children @addNum="getNum"></Children>
</div>
</template>
<script>
import ChildrenCom from '../components/Children'
export default {
name: 'Parent',
components: {
ChildrenCom
},
data() {
return {
parentNum: 0
}
},
methods:{
// childNum是由子组件传入的，多个参数向后罗列
getNum(childNum){
this.parentNum = childNum
}
}
}
</script>
兄弟组件间传值
运用自定义事件emit的触发和监听能力，定义一个公共的事件总线eventBus，通过它作为中间桥梁，我们就可以传值给任意组件了。而且通过eventBus的使用，可以加深$emit的理解。
EventBus.js
import Vue from 'vue'export default new Vue()
Children1.vue
<template><section>
<div @click="pushMsg">push message</div>
<br>
</section>
</template>
<script>
import eventBus from './EventBus'
export default {
name: "Children1",
components: {},
data() {
return {
childNum:0
}
},
methods: {
pushMsg(){
// 通过事件总线发送消息
eventBus.$emit('pushMsg',this.childNum++)
}
}
}
</script>
Children2.vue
<template><section>
children1传过来的消息：{{msg}}
</section>
</template>
<script>
import eventBus from './EventBus'
export default {
name: "Children2",
components: {},
data() {
return {
msg: ''
}
},
mounted() {
// 通过事件总线监听消息
eventBus.$on('pushMsg', (children1Msg) => {
this.msg = children1Msg
})
}
}
</script>
Parent.vue
<template><div class="parent">
<Children1></Children1>
<Children2></Children2>
</div>
</template>
<script>
import Children1 from '../components/Children1'
import Children2 from '../components/Children2'
export default {
name: 'Parent',
components: {
Children1,
Children2
},
data() {
return {
}
},
methods:{
}
}
</script>
使用$ref传值
通过$ref的能力，给子组件定义一个ID，父组件通过这个ID可以直接访问子组件里面的方法和属性
首先定义一个子组件Children.vue
<template><section>
传过来的消息：{{msg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
msg: '',
desc:'The use of ref'
}
},
methods:{
// 父组件可以调用这个方法传入msg
updateMsg(msg){
this.msg = msg
}
},
}
</script>
Parent.vue
<template><div class="parent">
<!-- 给子组件设置一个ID ref="children" -->
<Children ref="children"></Children>
<div @click="pushMsg">push message</div>
</div>
</template>
<script>
import Children from '../components/Children';// 引用子组件
export default {
name: 'parent',
components: {
Children,
},
methods:{
pushMsg(){
// 通过这个ID可以访问子组件的方法
this.$refs.children.updateMsg('Have you received the clothes？')
// 也可以访问子组件的属性
console.log('children props:',this.$refs.children.desc)
}
},
}
</script>
使用依赖注入传给所有后代
Parent.vue
<template><div class="parent">
<Children></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children,
},
provide: function () { //provide 选项允许我们指定我们想要提供给后代组件的数据/方法
return {
getName: this.name
}
},
}
</script>
Children.vue
<template><section>
父组件传入的值：{{getName}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
}
},
inject: ['getName'], //在任何后代组件里，我们都可以使用 inject 来给当前实例注入父组件的数据/方法
}
</script>
$parent
通过parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟$root，可以获取根组件实例。
// 获父组件的数据this.$parent.foo
// 写入父组件的数据
this.$parent.foo = 2
// 访问父组件的计算属性
this.$parent.bar
// 调用父组件的方法
this.$parent.baz()
// 在子组件传给父组件例子中，传值给父组件
this.$parent.getNum(100)
以上是 Vue 组件间传值 的全部内容， 来源链接： utcz.com/z/376660.html
