父组件 ------------------------------------------------------
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- :fatherMsg 在子组件标签上通过 :属性名 传递给子组件 -->
<!-- @toFatherManyArgs/@toFatherOneArg 是子组件 $emit传过来的第一个参数 -->
<!-- 当只有一个参数时, 接收参数的关键词是: $event -->
<!-- 当有多个参数时, 接收参数的关键词是: arguments -->
<ChildComponent :fatherMsg='toChild'
@toFatherManyArgs="toFatherManyArgs(arguments)"
@toFatherOneArg="toFatherOneArg($event)">
</ChildComponent>
{{receiveChild1}} {{receiveChild2}} {{receiveChild3}}
</div>
</template>
<script>
import ChildComponent from '../components/Child.vue'
export default {
name: 'HomeView',
data() {
return {
toChild: "world !",
receiveChild1: "",
receiveChild2: "",
receiveChild3: "",
}
},
components: {
ChildComponent
},
methods: {
toFatherManyArgs(args) {
this.receiveChild1 = args[0];
this.receiveChild2 = args[1];
},
toFatherOneArg(arg) {
this.receiveChild3 = arg;
}
}
}
</script>
子组件 ------------------------------------------------------
<template>
<div id="child-box">
{{message}}
{{fatherMsg}}
</div>
</template>
<script>
export default {
name: 'ChildView',
// 通过 props 接收父组件传过来的字段
props: ["fatherMsg"],
data() {
return {
message: 'hello',
say: 'nice to meet you',
}
},
created() {
this.$emit('toFatherManyArgs', this.say, "kangkang")
this.$emit('toFatherOneArg', "meimei")
},
}
</script>
