vue组件传值

100 阅读 0 评论 66 点赞

我是靠谱客的博主俊秀蜡烛，这篇文章主要介绍vue组件传值，现在分享给大家，希望可以做个参考。

父子组件传值

父组件：引用组件的页面叫做父组件。
子组件：被引用的，存放于components文件夹中的文件是子组件。
父传子：pros传值

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
//父组件中：
<Invitation :visible="dialogVisible" />
//子组件中：
props: ["visible"],
//或者
props: {
	visible: {
		type: 值的类型,
		default: 默认值
	}
}

子传父：$emit

复制代码

1
2
3
4
5
6
7
8
9
10
11
//父组件中定义一个回调方法用来接收参数
<Invitation ref="Invitation" :visible="dialogVisible" @getData="getdata" />
//绑定一个getdata方法
getdata(val) {
    console.log(val);
    //然后就可以在这个方法中获取到值
},
//子组件中：
//在方法中通过$emit('父组件接收的方法名',传值);
this.$emit('getdata',value);

父组件修改子组件的某个私有属性或者调用子组件的某个方法：

复制代码

1
2
3
4
5
6
7
8
9
//首先在父组件中定义ref属性
<Invitation ref="Invitation" />
//在父组件需要修改子组件值的事件里写
//this.$refs.定义的ref值.要修改的值 = 什么什么；
this.$refs.Invitation.visible = true;
//在父组件需要调用子组件方法的事件里写
//this.$refs.定义的ref值.要调用的方法名；
this.$refs.Invitation.showModel();

父组件给深层嵌套的子组件传值

和父子组件传值差不多，在父组件中定义provide函数，返回一个对象，provide函数和data同级，然后在子组件或者子孙组件中使用inject接收传过来的值。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 父组件
provide(){
    return {
      keyName: this.changeValue
    }
},
data(){
	return {
		msg:'初始mesg'
	}
},
methods: {
  	changeValue(){
  		this.msg= '改变后的msg'
  	}
} 

// 子孙组件
inject:['keyName']
create(){
	console.log(this.keyName) // 改变后的msg
}

vue父子组件加载顺序

加载渲染过程：beforeCreate(父) —> created(父)—>beforeMount(父)—>beforeCreate(子)—>created(子)—>beforeMount(子)—>mounted(子)—>mounted(父)
更新过程：beforeUpdate(父) —> beforeUpdate(子) —> update(子) —> update(父)
父组件更新：beforeUpdate(父) —> updated（父）
销毁过程：beforeDestory(父) —> beforeDestory(子) —> destoryed(子) —> destoryed(父)