vue组件传值

父子组件传值

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

//父组件中：
<Invitation :visible="dialogVisible" />
//子组件中：
props: ["visible"],
//或者
props: {
	visible: {
		type: 值的类型,
		default: 默认值
	}
}

子传父：$emit

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

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

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

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

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

// 父组件
provide(){
    return {
      keyName: this.changeValue
    }
},
data(){
	return {
		msg:'初始mesg'
	}
},
methods: {
  	changeValue(){
  		this.msg= '改变后的msg'
  	}
} 

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

vue父子组件加载顺序

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

最后

以上就是俊秀蜡烛为你收集整理的vue组件传值的全部内容，希望文章能够帮你解决vue组件传值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。