vue页面之间传值--20200701

最新推荐文章于 2024-07-23 14:29:05 发布

benhi

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/a1105560049/article/details/107064061

版权

本文详细介绍了Vue中组件间通信的几种方式，包括父组件传值子组件、子组件传值父组件以及兄弟组件间传值。强调了使用props、$emit以及事件总线等方式，并讨论了它们的优缺点，提出在复杂场景下可以考虑使用Vuex进行状态管理。

摘要由CSDN通过智能技术生成

页面之间传值

父主页面：

private goToProduct(typeId): void {
	console.log("typeId",typeId)
    this.$router.push({ path: "/helper/product", query: { typeId: typeId }});
  }

要跳转的子页面：

private productRec(): void {
			this.typeId = this.$route.query.typeId
			console.log("goToProduct-typeId",this.typeId)
			this.getDocProduct()
		}

需求1：假设要把父组件的zhuli传值到这是用户的详细信息(红色区域)，该如何操作？

(已知)标签上可以写自定义属性，在使用标签的时候，告诉子组件使用哪些标签，子组件中用props定义可以使用的属性，可以传多个属性。

在父组件使用的子组件标签中绑定自定义属性：

<app-user-detail :myName="name"></app-user-detail>

在子组件中使用props(可以是数组也可以是对象)接受即可。

export default {
    props: ['myName']
}

注意的点:

自定义的属性最好使用中划线写法，my-name，在正常的vue实例中(没有使用vue-cli)中不支持驼峰式写法myName，因为vue-cli中是有vue-template-compiler插件支持，正常的vue实例中没有，会报错。

需求2：改变传过来的值

直接使用函数修改的话，可以修改成功，但会报错，容易造成数据流混乱。我们应该使用data字段，先把传过来的值赋值给一个变量，再更改那个变量。

export default {
    props: ['myName', 'age'],
    data() {
        re

关注

专栏目录