vue2中父子传值的5种方式？

1.父传子：props， 父组件通过属性绑定的形式将数据传递给子组件，并在子组件中定义props来接收。

// 父组件
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent',
    };
  },
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

2.子传父： $emit, 通过在子组件中使用$emit方法触发自定义事件，然后在父组件中使用v-on指令监听该事件并执行相应的逻辑。这样子组件就可以向父组件发送消息或传递数据。

// 父组件
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Received payload:', payload);
    },
  },
};
</script>

// 子组件
<template>
  <div>
    <button @click="triggerEvent">Trigger Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello from child');
    },
  },
};
</script>

3.parent和children：通过访问父组件的this.parent或子组件的this.children属性来直接访问父组件或子组件的实例，并进行数据传递。

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  mounted() {
    console.log(this.$children); // 子组件实例数组
    console.log(this.$children[0].message); // 子组件实例的message属性
  },
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child',
    };
  },
  mounted() {
    console.log(this.$parent); // 父组件实例
    console.log(this.$parent.parentMessage); // 父组件实例的parentMessage属性
  },
};
</script>

4.Provide和Inject：通过在父组件中使用provide提供数据，在子组件中使用inject注入数据。这种方式可以实现跨级组件之间的数据传递。

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      sharedMessage: 'Hello from parent',
    };
  },
};
</script>

// 子组件
<template>
  <div>
    <p>{{ sharedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedMessage'],
};
</script>

在上述示例中，父组件通过this.$children获取子组件实例的数组，并访问了子组件实例的message属性。子组件通过this.$parent获取父组件实例，并访问了父组件实例的parentMessage属性。

然而，这种直接访问父子组件实例的方式并不是常用的数据传递方式。通常推荐使用props和$emit等方式来进行父子组件之间的数据传递，以保持代码的可维护性和可测试性。

补充：在Vue.js中，可以通过在子组件上添加ref属性，并指定一个唯一的名称，来创建一个引用。然后可以使用this.$refs对象来访问这个引用，以获取对应的子组件实例。

<template>
  <div>
    <child-component ref="myChild"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  mounted() {
    console.log(this.$refs.myChild); // 获取子组件实例
    console.log(this.$refs.myChild.message); // 访问子组件实例的属性
  },
};
</script>

在上述示例中，父组件使用ref属性给子组件命名为"myChild"。然后在mounted钩子函数中，通过this.$refs.myChild来访问子组件的实例，并进一步访问其message属性。

使用ref可以更精确地访问特定的子组件实例，并且不需要依赖于子组件在this.$children数组中的位置。同时，ref还可以用于访问其他类型的DOM元素或组件实例，提供了更灵活的访问方式。

5.Vuex（状态管理）：如果需要在多个组件之间共享数据或进行复杂的数据通信，可以使用Vuex来进行状态管理。Vuex是一个专为Vue.js应用程序开发的状态管理模式。