父子组件间传值、传递事件
程序员文章站
2024-02-26 16:32:22
...
一、父子组件间传值
1、父组件向子组件传值
父组件
<template>
<div class="father">
<child fatherMsg="click me"></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
components: {
child
},
data () {
return {}
}
}
</script>
子组件
<template>
<div class="child">
<button >{{fatherMsg}}</button>
</div>
</template>
<script>
export default {
props: ['fatherMsg'],
data () {
return {}
}
}
</script>
在父组件中,创建一个自定义属性fatherMsg
,将值赋值给fatherMsg
。
在子组件中,使用props
来接收fatherMsg
传递来的值。
2、子组件向父组件传值
父组件
<template>
<div class="father">
<child @listenChildEvent="recvMsg"></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
components: {
child
},
data () {
return {}
},
methods: {
recvMsg (msg) {
console.log(msg)
}
}
}
</script>
子组件
<template>
<div class="child">
<button @click="sendMsgToFather">click me</button>
</div>
</template>
<script>
export default {
props: ['fatherMsg'],
data () {
return {}
},
methods: {
sendMsgToFather () {
this.$emit('listenChildEvent', 'this msg is from child')
}
}
}
</script>
在子组件里用this.$emit('listenChildEvent', 'msg')
向父组件触发一个事件,父组件监听这个事件就行了。listenChildEvent
是父组件中的监听方法, msg
是需要传递给父组件的信息。
二、父组件向子组件传递事件
1、使用props接收父组件的方法
父组件
<template>
<div class="father">
<child :fatherMsg="handle"></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
components: {
child
},
data () {
return {}
},
methods: {
handle () {
console.log('click me')
}
}
}
</script>
子组件
<template>
<div class="child">
<button @click="fatherMsg">click me</button>
</div>
</template>
<script>
export default {
props: ['fatherMsg'],
data () {
return {}
}
}
</script>
在父组件中,创建一个自定义属性fatherMsg
,使用属性绑定,将值事件绑定给fatherMsg
。
在子组件中,使用props
来接收fatherMsg
传递来的事件,使用v-on来触发。
2、直接在子组件中通过this.$parent.event来调用父组件的方法
父组件
<template>
<div class="father">
<child></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
components: {
child
},
data () {
return {}
},
methods: {
clickMe () {
console.log('clicked')
}
}
}
</script>
子组件
<template>
<div class="child">
<button @click="handle">click me</button>
</div>
</template>
<script>
export default {
props: ['fatherMsg'],
data () {
return {}
},
methods: {
handle () {
this.$parent.clickMe()
}
}
}
</script>
3、在子组件里用$emit向父组件触发一个事件,父组件监听这个事件(同子组件向父组件传值)。
4、父组件把方法传入子组件中,在子组件里直接调用这个方法。
父组件
<template>
<div class="father">
<child :fatherMethod="clickMe"></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
components: {
child
},
data () {
return {}
},
methods: {
clickMe () {
console.log('clicked')
}
}
}
</script>
子组件
<template>
<div class="child">
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
data () {
return {}
},
methods: {
childMethod () {
if (this.fatherMethod) {
this.fatherMethod()
}
}
}
}
</script>
上一篇: 四、处理表单数据
下一篇: Python 模拟购物车的实例讲解