父子通讯

子调用父的函数

props $emit(...)

<!-- 父 -->
<template>
  <div id="app">
    <HelloWorld :msg="msg" @setmsg="setMsg" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data: () => ({
    msg: 0,
  }),
  methods: {
    setMsg(msg) {
      this.msg = msg;
    },
  },
};
</script>

<!-- 儿子 -->
<template>
  <div class="hello">
    <h1 @click="tap">父子通讯: {{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: Number,
  },
  methods: {
    tap() {
      this.$emit("setmsg", new Date() - 0);
    },
  },
};
</script>

父调用子的函数

$parent $ref

<!-- 父 -->
<template>
  <HelloWorld ref="hello" />
  <h1>father: {{ count }}</h1>
  <button @click="childAdd">father btn</button>
</template>

<script>
import HelloWorldVue from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },
  data: () => ({
    count: 0,
  }),
  methods: {
    childAdd() {
      this.$refs["hello"].add();
    },
    fatherAdd() {
      this.count++;
    },
  },
};
</script>

<!-- 儿子 -->
<template>
  <div class="hello">
    <h1>child: {{ count }}</h1>
    <button @click="fatherAdd">child btn</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    count: 0,
  }),
  methods: {
    add() {
      this.count++;
    },
    fatherAdd() {
      this.$parent.fatherAdd();
    },
  },
};
</script>

任意组件通讯

event bus

<!-- 任意组件a -->
<template>
  <button @click="add">加</button>
</template>

<script>
import { EventBus } from "../eventbus";

export default {
  name: "aaa",
  methods: {
    add() {
      EventBus.$emit("add", 2);
    },
  },
};
</script>

<!-- 任意组件b -->
<template>
  <div>{{ count }}</div>
</template>

<script>
import { EventBus } from "../eventbus";

export default {
  name: "bbb",
  data: () => ({
    count: 0,
  }),
  methods: {
    add(num) {
      this.count += num;
    },
  },
  mounted() {
    EventBus.$on("add", this.add);
  },
  destroyed() {
    EventBus.$off("add", this.add);
  },
};
</script>

vuex

• Getter读取并加工数据，附有一个mapGetters辅助函数
• Mutation 用于同步提交状态变更，附有一个 mapMutations 辅助函数
• Action用于异步变更状态，但它提交的是mutation，而不是直接变更状态。

爷孙通讯 provide inject

<!-- 爷爷 -->
 <template>
  <div>
    <h1>我的名字是:赵{{ name }}</h1>
    <Father />
  </div>
</template>

<script>
import { computed } from "vue";
import Father from "./father";

export default {
  name: "App",
  components: {
    Father: Father,
  },
  data: () => {
    return {
      name: "日天",
    };
  },
  provide() {
    return {
      firstName: "赵",
      lastName: computed(() => this.name),
    };
  },
};
</script>

<!-- 父亲 -->
<template>
  <div>
    <h1>我父亲名字是:{{ firstName + lastName.value }}</h1>
    <Child />
  </div>
</template>

<script>
import Child from "./child.vue";

export default {
  name: "App",
  components: { Child },
  inject: ["firstName", "lastName"],
};
</script>

<!-- 儿子 -->
<template>
  <div>
    <h1>我爷爷名字是:{{ firstName + lastName.value }}</h1>
  </div>
</template>

<script>
export default {
  name: "App",
  inject: ["firstName", "lastName"],
};
</script>

属性透传 $attrs

• $attrs 配合 v-bind实现属性透传
• props和emits 未定义的会在$attrs里面

<!-- 爷爷 -->
<template>
  <div id="app">
    app: <input v-model="v" />
    <Father :msg="v" size="66" />
  </div>
</template>

<script>
import Father from "./father";

export default {
  name: "App",
  components: { Father },
  data: () => ({
    v: "aaa",
  }),
};
</script>

<!-- 爸爸 -->
<template>
  <div id="father">
    <h1>father</h1>
    <Child v-bind="$attrs" />
  </div>
</template>

<script>
import Child from "./child.vue";

export default {
  name: "father",
  components: { Child },
};
</script>

<!-- 儿子 -->
<template>
  <div id="child">
    <h1>child: {{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "child",
  props: ["msg"],
  mounted() {
    console.log(this.$attrs, "props 没定义的在这打印");
  },
};
</script>