vue中父子组件之间的通信
1. 父组件向子组件传值
父组件向子组件传值,通过props传递
parent.vue:父组件向子组件传递一个a值,子组件通过props接受
<template lang="html">
<div class="">
<h1>这是父组件</h1>
<children :a='a'></children>
</div>
</template>
<script>
import children from '@/components/children'
export default {
components: {
'children':children
},
data () {
return {
a : 1
}
}
}
</script>
<style lang="css">
</style>
children.vue: 子组件通过props接受a值,在和h2中显示 1
。
<template lang="html">
<div class="">
<h1>这是子组件</h1>
<h2>{{a}}</h2>
</div>
</template>
<script>
export default {
name: 'children',
props: ['a'],
data () {
}
}
</script>
<style lang="css">
</style>
2. 子组件向父组件传值,并更改父组件传过来的值,通过this.$emit方法
在父组件中引子组件,并且子组件上绑定一个change事件,这个事件接收子组件传递的值。
parent.vue
<template lang="html">
<div class="">
<h1>这是父组件</h1>
<h2>{{a}}</h2>
<button @click='less'> - </button>
<children @change='changeValue' :a='a'></children>
</div>
</template>
<script>
import children from '@/components/children'
export default {
components: {
'children':children
},
data () {
return {
a : 1
}
},
methods: {
changeValue(value) {
this.a = value
},
less() {
this.a --
}
}
}
</script>
<style lang="css">
</style>
在子组件中,通过props接收父组件传递的值,并且通过this.$emit方法向父组件传递值。
children.vue
<template lang="html">
<div class="">
<h1>这是子组件</h1>
<h2>{{a}}</h2>
<button @click='addChild'>+</button>
</div>
</template>
<script>
export default {
name: 'children',
props: ['a'],
data () {
return {
b : 0
}
},
methods: {
addChild() {
this.b = this.a
this.b ++
this.$emit('change',this.b)
}
}
}
</script>
<style lang="css">
</style>
在子组件中,将父组件传递的a的值重新赋值给一个新的变量b,然后去更改b的值,通过this.$emit(‘change’,this.b)传递给父组件,这里的change事件是在父组件中定义的。