父組件 ------------------------------------------------------
<template>
? ? <div class="home">
? ? ? ? <img alt="Vue logo" src="../assets/logo.png">
? ? ? ? <!--? :fatherMsg ?在子組件標(biāo)簽上通過(guò) :屬性名 傳遞給子組件 -->
? ? ? ? <!-- @toFatherManyArgs/@toFatherOneArg 是子組件 $emit傳過(guò)來(lái)的第一個(gè)參數(shù) -->
? ? ? ? <!-- 當(dāng)只有一個(gè)參數(shù)時(shí), 接收參數(shù)的關(guān)鍵詞是: $event -->
? ? ? ? <!-- 當(dāng)有多個(gè)參數(shù)時(shí), 接收參數(shù)的關(guān)鍵詞是: 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',
? ? // 通過(guò) props 接收父組件傳過(guò)來(lái)的字段
? ? props: ["fatherMsg"],
? ? data() {
? ? ? ? return {
? ? ? ? ? ? message: 'hello',
? ? ? ? ? ? say: 'nice to meet you',
? ? ? ? }
? ? },
? ? created() {
? ? ? ? this.$emit('toFatherManyArgs', this.say, "kangkang")
? ? ? ? this.$emit('toFatherOneArg', "meimei")
? ? },
}
</script>
