父组件向子组件传值,传递事件
1、将posts
的值通过post
,传递给子组件 ;
2、将doSomeThing
事件通过my-event
传递给子组件
父组件
<childComponent @my-event="doSomeThing()" :post="posts"></childComponent>
data() {
return {
posts: [
{
id: 1,
title: "aaa"
},
{
id: 2,
title: "bbb"
}
]
};
},
methods: {
doSomeThing() {
alert("doSomeThing");
}
}
子组件
<template>
<div>
<h3>{{post.title}}</h3>
<button @click="emitMyEvent()">点击子组件</button>
</div>
</template>
<script>
export default {
props: ["post"],
data() {
return {};
},
methods: {
emitMyEvent() {
this.$emit("my-event");
}
}
};
</script>