组件通信

一、prop 通信

---

1.1 prop 只读通信

父组件

<template>
  <div>
    <AComp :name="name"></AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  data(){
    return {
      name: "为人进出的门紧锁着"
    }
  }
};
</script>

子组件

<template>
  <div>
    {{ name }}
  </div>
</template>

<script>
export default {
  props:{
    name: String
  }
};
</script>

1.2 prop & $emit 组合通信

父组件

<template>
  <div>
    <AComp :name.sync="name" @setName="setName"></AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  data(){
    return {
      name: "为人进出的门紧锁着"
    }
  },
  methods:{
    setName(name){
      this.name = name;
    }
  }
};
</script>

子组件

<template>
  <div>
    {{ name }}
    <button @click="setName">改变 name</button>
  </div>
</template>

<script>
export default {
  props:{
    name: String
  },
  methods:{
    setName(){
      this.$emit('setName',"为狗爬出的洞敞开着");
    }
  }
};
</script>

1.3 prop.sync & $emit 组合通信

父组件

<template>
  <div>
    <AComp :name.sync="name"></AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  data(){
    return {
      name: "为人进出的门紧锁着"
    }
  }
};
</script>

子组件

<template>
  <div>
    {{ name }}
    <button @click="setName">改变 name</button>
  </div>
</template>

<script>
export default {
  props:{
    name: String
  },
  methods:{
    setName(){
      this.$emit('update:name',"为狗爬出的洞敞开着");
    }
  }
};
</script>

二、$refs 通信

---

父组件

<template>
  <div>
    <AComp ref="aComp"></AComp>
    <button @click="setName">改变 AComp 的 name</button>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  methods: {
    setName() {
      this.$refs.aComp.setName('为狗爬出的洞敞开着');
    },
  },
};
</script>

子组件

<template>
  <div>
    <h3>A 组件</h3>
    {{ name }}
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: "为人进出的门紧锁着"
    }
  },
  methods:{
    setName(name){
      this.name = name;
    }
  }
};
</script>

二、$parent 通信

---

父组件

<template>
  <div>
    <AComp></AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  data(){
    return {
      name: "为人进出的门紧锁着"
    }
  },
  methods:{
    setName(name){
      this.name = name;
    }
  }
};
</script>

子组件

<template>
  <div>
    {{ $parent.name }}
    <button @click="setName">改变 name</button>
  </div>
</template>

<script>
export default {
  props:{
    name: String
  },
  methods:{
    setName(){
      this.$parent.setName("为狗爬出的洞敞开着");
    }
  }
};
</script>

三、$children 通信

---

父组件

<template>
  <div>
    <AComp></AComp>
    <button @click="setName">改变子组件 name</button>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  data() {
    return {};
  },
  methods: {
    setName() {
      this.$children[0].setName("为狗爬出的洞敞开着");
    },
  },
};
</script>

子组件

<template>
  <div>
    {{ name }}
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: "为人进出的门紧锁着"
    }
  },
  methods:{
    setName(content){
      this.name = content;
    }
  }
};
</script>

四、on & emit 组合通信

---

父组件

<template>
  <div>
    <AComp :name="name"></AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  data(){
    return {
      name: "为人进出的门紧锁着"
    }
  },
  mounted(){
    this.$on('setName',this.setName)
  },
  methods:{
    setName(name){
      this.name = name;
    }
  }
};
</script>

子组件

<template>
  <div>
    {{ name }}
    <button @click="setName">改变 name</button>
  </div>
</template>

<script>
export default {
  props:{
    name: String
  },
  methods:{
    setName(){
      this.$parent.$emit('setName',"为狗爬出的洞敞开着");
    }
  }
};
</script>

五、provide & inject 组合通信

---

5.1 非响应式通信过程

provide 和 inject 如果绑定的是基础数据, 那么是非响应的

父组件

<template>
  <div>
    <HelloWorld></HelloWorld>
    <button @click="add">增加 Value</button>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      value: 0,
    };
  },
  provide() {
    return {
      value: this.value,
    };
  },
  methods: {
    add() {
      this.value = this.value + 1;
      console.log(this.value);
    },
  },
};
</script>

子组件

<template>
  <div>
    {{  this.value }}
  </div>
</template>

<script>
export default {
  inject:{
    value: {
      from: "value",
      default: 0
    }
  },  
};
</script>

5.2 可响应式通信过程

provide 和 inject 如果绑定的是响应式的对象，那么对象的 property 是可响应的

父组件

<template>
  <div>
    <HelloWorld></HelloWorld>
    <button @click="addNum">App 组件 增加 State.Num</button>
    <button @click="addListItem">App 组件 增加 State.List</button>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      state: {
        num: 0,
        list: [],
      },
    };
  },
  provide() {
    return {
      state: this.state,
      addNum: this.addNum,
      addListItem: this.addListItem
    };
  },
  methods: {
    addNum() {
      this.state.num = this.state.num + 1;
    },
    addListItem(){
      const item = this.state.num;
      this.state.list.push(item)
    }
  },
};
</script>

子组件

<template>
  <div>
    {{ this.value.num }}

    <ul>
      <li :key="index" v-for="(item,index) in value.list">{{ item }}</li>
    </ul>

    <button @click="addListItem">HelloWorld 组件 增加 State.List</button>

  </div>
</template>

<script>
export default {
  inject: {
    value: {
      from: "state",
      default: () => {
        return { num: 0, list: [] };
      },
    },
    addNum: {
      from: "addNum"
    },
    addListItem: {
      from : "addListItem"
    }
  },
};
</script>