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

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

文章目录

• • 父组件向子组件传参
  • 父组件主动获取所有的参数和方法（子组件被动传参）
  • 子组件（主动）向父组件传参
  • 子组件向父组件传参 $emit
  • 通过 Vuex 共享数据
  • 通过 provide 和 inject
  • 通过事件总线（Event Bus）
  • 通过路由参数

父组件向子组件传参

父组件直接绑定在子组件的标签上，子组件通过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.jsimport 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>{{ $ssage }}</p></div>
</template><script>
export default {// 通过 $route 访问路由参数
};
</script>

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