vue父子组件传参的几种方式

父组件向子组件传参

父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。

父组件

<template>
	<i-activities-item
	    :content="content"
	/>
</template>

<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
  name: 'NewsCenterListPaging',

  components: {
    'i-activities-item': ActivityItem,
  },
  data() {
    return {
      content: 'text',
    };
  },
};
</script>

子组件

<template>
	<div>{{ content }}</div>
</template>

<script>
export default {
  name: '',

  props: {
    content: {
    	// 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
    	// 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
		type: String,
		// 定义是否必须传
		required: true,
		// 定义默认值
		default: '暂无'
	},
  },
  data() {
    return {};
  },
};
</script>

父组件主动获取所有的参数和方法（子组件被动传参）

父组件代码

<template>
	<i-bind-phone ref="phoneRef" :phone="phone" />
</template>

<script>
import PhonePopup from '@/views/personal-center/system-setting/componets/bind-phone';
export default {
  components: {
    'i-bind-phone': PhonePopup,
  },

  data() {
    return {
      phone: null,
      },
  },
  methods: {
    // 点击查看手机绑定
    onClickChangePhone() {
    // 父组件调用子组件中的showPhone方法
      this.$refs.phoneRef.showPhone();
      console.log(this.$refs.phoneRef.visible)
    },
  },
};
</script>

子组件代码

<template>
	<div v-if="visible">
		....
	</div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      },
  },
  methods: {
    showPhone() {
      this.visible = true
    },
  },
};
</script>

子组件（主动）向父组件传参

子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用。

父组件代码

<template>
	<i-activities-item
	    :content="content"
	    :callback="onCallback"
	/>
</template>

<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
  name: 'NewsCenterListPaging',

  components: {
    'i-activities-item': ActivityItem,
  },
  data() {
    return {
      content: 'text',
      childValue: ''
    };
  },
  methods: {
   // childrenData就是子组件传递过来的参数
	onCallback(childrenData) {
		console.log(childrenData)
		this.childValue = childrenData
	}
  }
};
</script>

子组件代码

<template>
	<div>{{ content }}</div>
	<button @clcik="onClick">点击传递向父组件传参</button>
</template>

<script>
export default {
  name: '',

  props: {
    content: {
    	// 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
    	// 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
		type: String,
		// 定义是否必须传
		required: true,
		// 定义默认值
		default: '暂无'
	},
	callback: {
		type: Function
	}
  },
  data() {
    return {
		dataValue: 123
	};
  },
  methods: {
	onClick() {
		this.callback(this.dataValue)
	}
	}
};
</script>

子组件向父组件传参 $emit

你可以在父组件中使用 $emit 发送自定义事件，然后在子组件中监听该事件来传递数据。

父组件代码

<template>
	<i-activities-item @delete="onDeleteItem" />
</template>

<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
  name: 'NewsCenterListPaging',

  components: {
    'i-activities-item': ActivityItem,
  },
  data() {
    return {
      content: 'text',
      childValue: ''
    };
  },
  methods: {
  	// 当子组件触发delete事件时，父组件的该函数就会执行
	onDeleteItem(childrenData) {
		console.log(childrenData) // 123
	}
  }
};
</script>

子组件代码

<template>
	<button @clcik="onClick">点击传递向父组件传参</button>
</template>

<script>
export default {
  name: '',
  data() {
    return {
		dataValue: 123
	};
  },
  methods: {
	onClick() {
		// 第一个参数为父组件绑定在子组件上的自定义事件，第二个参数为传递的参数
		this.$emit('delete', this.dataValue)
	}
	}
};
</script>

通过 Vuex 共享数据

如果你需要在多个组件之间共享数据，可以使用 Vuex 来管理应用的状态。

通过 provide 和 inject

Vue 提供了 provide 和 inject 选项，允许父组件向子组件传递数据，而不需要显式地通过 props 进行传递。

父组件代码

<template>
  <child-component />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  provide: {
    message: 'Hello from parent',
  },
};
</script>

子组件代码

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

通过事件总线（Event Bus）

你可以创建一个全局的事件总线来传递数据。在父组件中触发事件，而子组件监听事件以接收数据。

创建一个新的 Vue 实例并将其作为事件总线

// EventBus.js

import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;

在发送事件的组件中使用 $emit 来触发事件

// 发送事件的组件

methods: {
  sendDataToEventBus() {
    EventBus.$emit('customEvent', 'Data from sending component');
  },
},

在接收事件的组件中使用 $on 来监听事件

// 接收事件的组件

mounted() {
  EventBus.$on('customEvent', (data) => {
    // 处理接收到的事件数据
    console.log(data); // 输出 "Data from sending component"
  });
},

通过路由参数

如果你的父子组件之间在不同的路由中，你可以使用路由参数来传递数据。这适用于使用 Vue Router 的应用。

在父组件代码

<router-link :to="{ path: '/child', query: { message: 'Hello from parent' } }">Go to Child</router-link>

在子组件代码

<template>
  <div>
    <p>{{ $route.query.message }}</p>
  </div>
</template>

<script>
export default {
  // 通过 $route 访问路由参数
};
</script>

在父组件和子组件中都可以访问和修改 Vuex 存储的数据。