vue父子组件通讯

1. 动态绑定/props 

例子：

父组件  Parent.vue

<template>
  <div>
    <div class="parent">
      <div>父组件</div>
      <br />
      <child :message="message" @changeMessage="message = $event" />
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  components: { Child },
  props: {},
  data() {
    return {
      message: "hello! 我是父组件消息",
    };
  },
  methods: {
    onHandle(e) {
      console.log(e);
    },
  },
};

</script>

子组件  Child.vue

<template>
  <div>
    <div class="child">子组件接收到的消息：{{ message }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script>
export default {
  name: "child",
  components: {},
  props: ["message"],
  data() {
    return {};
  },
  methods: {
    handleClick() {
      this.$emit("changeMessage", "在子组件中修改了message");
    },
  },
};
</script>

以上例子做了这几件事情：

1.父组件通过在子组件上绑定动态属性传值，

2.子组件通过 props 来注入接收到的值

3.子组件通过  this.$emit 注册自定义事件 ，

4.父组件通过@事件函数名 ，来监听这个自定义事件，$event则是自事件传递的值，$event赋值给了父组件的message

2.callback方式传值

例子：

父组件  Parent.vue

<template>
  <div>
    <div class="parent">
      <div>父组件值：{{ message }}</div>
      <br />
      {{ message2 }}
      <child :message="message" :changeMsgFn="changeMessage" />
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  components: { Child },
  props: {},
  data() {
    return {
      message: "hello! 我是父组件消息",
      message2: "1",
    };
  },
  methods: {
    changeMessage(chlidMessage2) {
      this.message2 = chlidMessage2;
      this.message = "message被修改了";
    },
  },
};
</script>

子组件  Child.vue

<template>
  <div>
    <div class="child">子组件接收到的消息：{{ message }}</div>
    <div>{{ chlidMessage2 }}</div>
    <button @click="changeMsgFn(chlidMessage2)">按钮</button>
  </div>
</template>

<script>
export default {
  name: "child",
  components: {},
  props: ["message", "changeMsgFn"],
  data() {
    return {
      chlidMessage2: 123,
    };
  },
  methods: {
    handleClick() {
      this.$emit("changeMessage", "在子组件中修改了message");
    },
  },
};
</script>

1.父组件中定义方法，方法接收形参

2.通过动态绑定传值 ， 将父组件中定义的方法传入子组件 

3.子组件将父组件传入的方法调用，且传入形参

3.$parent+$children

例子：

父组件  Parent.vue

<template>
  <div>
    <div class="parent">
      <div>父组件值：{{ message }}</div>
      <br />
      <child />
      <br />
      <button @click="changeChildNum">按钮</button>
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  components: { Child },
  props: {},
  data() {
    return {
      message: "hello! 我是父组件消息",
    };
  },
  methods: {
    changeChildNum() {
      this.$children[0].num = 50;
    },
  },
};

子组件  Child.vue

<template>
  <div>
    <div class="child">子组件接收到的消息：{{ parentMessage() }}</div>
    <div>{{ num }}</div>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      num: 10,
    };
  },
  methods: {
    parentMessage() {
      return this.$parent.message;
    },
  },
};
</script>

1.一个父组件可能有很多个子组件 ， 父组件通过 this.$children[0] 找到子组件，

2.父组件通过改变this.$children[0] 上的属性，从而改变子组件内部的值

3.子组件通过this.$parent来获取父组件

4.子组件通过改变this.$parent的属性，从而改变父组件内部的值

4.provide+inject

例子：

父组件  Parent.vue

<template>
  <div>
    <div class="parent">
      <div>父组件值：{{ message }}</div>
      <child />
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  components: { Child },
  provide() {
    return {
      message: this.message,
    };
  },
  data() {
    return { message: "hello! 我是父组件消息" };
  },
};

子组件  Child.vue

<template>
  <div>
    <div class="child">子组件接收到的消息：{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: "child",
  inject: ["message"],
};
</script>

1.父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量

2.不论子组件有多深，只要调用了inject那么就可以注入provider中的数据

3.在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值

注意：

 1. provide  是一个对象，或者是一个返回对象的函数。当为一个对象时，访问不到this

 2.子孙层的provide会掩盖祖父层provide中相同key的属性值

 不推荐直接使用在应用程序代码中是因为数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了。

5.$attr+$listeners

例子：

父组件  Parent.vue

<template>
  <div>
    <h1>父组件</h1>
    <div class="parent">
      <div>父组件值：{{ age }}</div>
      <child :age="age" :name="name" @changeAge="changeAge" />
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  components: { Child },
  data() {
    return {
      name: "joke",
      age: 20,
    };
  },
  methods: {
    changeAge(num) {
      this.age = num;
    },
  },
};
</script>

子组件  Child.vue

<template>
  <div>
    <h1>子组件</h1>
    <div class="child">子组件接收到的消息：{{ $attrs.age }}</div>
    <button @click="$listeners.changeAge(50)">按钮</button>
    <br />
    <grend-child v-bind="$attrs" />
  </div>
</template>

<script>
import GrendChild from "./GrendChild.vue";
export default {
  components: { GrendChild },
  name: "child",
};
</script>

孙组件  GrendChild.vue

<template>
  <div>
    <h1>孙组件</h1>
    <div class="container">
      {{ $attrs.name }}
    </div>
    <div>
      {{ $attrs.age }}
    </div>
  </div>
</template>

1.父组件动态传值给子组件 ，方法通过@事件监听器传递给子组件

2.子组件通过$attrs接收到父组件传递给子组件所有的值 

3.子组件通过在孙组件上v-bind=$attrs ， 将子组件获取到的$attrs传递给孙组件，从而实现了父传孙

4.子组件通过$listeners获取到所有父组件在子组件上的定义的事件监听器@，通过调用$listeners.父方法 ， 从而实现了子调用父的方法

5.子组件通过在孙组件上，v-on=$listeners , 将子组件获取到的$listeners 传递给孙组件，从而实现了孙调用父的方法

6.ref属性

例子

父组件  Parent.vue

<template>
  <div>
    <h1>父组件</h1>
    <div class="parent">
      <div>父组件值：</div>
      <child ref="childComp" />
      <button @click="changeAge">按钮</button>
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "parent",
  components: { Child },
  methods: {
    changeAge() {
      this.$refs.childComp.changeAge();
      console.log(this.$refs.childComp);
    },
  },
};
</script>

子组件  Child.vue

<template>
  <div>
    <h1>子组件</h1>
    <div class="child">子组件接收到的消息：{{ age }}</div>
    <br />
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      age: 20,
    };
  },
  methods: {
    changeAge() {
      this.age = 50;
    },
  },
};
</script>

 1.父组件通过this.$refs获取到子组件实例，改变子组件内部变量，或调用子组件方法

 ....