父組件向子組件傳值,傳遞事件
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>