Vue父子组建之间的传值:
一、父子组建之间的传值
1.1 父组件向子组件传值
父组件向子组件传值是通过属性的方式 传值,传的值可以是任意类型,甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。
1. 在父组件中引入子组件;
2. 并在components中注册子组件;
3. 通过属性向子组件中传值。
//1. 引入子组件
import child from'./child.vue'exportdefault{
data() {return{
}
},//2.在父组件的components中注册子组件
components: {
child
},
methods: {
parentFun() {
console.log("这是父组件的方法");
}
}
}
4. 在子组件中国通过props属性接收父组件串过来的数据
调用父组件的方法
data() {return{}
},
props: {/*4. 通过属性接收父组件传过来的数据,属性是parent-fun, props中可以使用parentFun变量接收*/title,
parentFun,
parent
}
}
注: 以上所写的步骤是方便自己的记忆,实际开发中是先设计好子组件,子组件中已经定义好需要父组件在使用子组件时所需要的属性,父组件在调用子组件时按子组件定义的属性传值。
1.2 子组件向父组件传值
子组件向父组件传值是通过自定义事件的方式向父组件传值,为方便理解记忆,可按以下步骤:
1. 在子组件中通过子组件的$emit方法自定义事件向父组件传数据
调用父组件的方法
点击向父组件传值
data() {return{
msg:'这是子组件的msg'}
},
props: {/*4.通过属性接收父组件传过来的数据,属性是parent-fun, props中可以使用parentFun变量接收*/title,
parentFun,
parent
},
methods: {
sendMsgToParent() {//1.子组件通过子定义事件child-msg的方式将msg传给父组件
this.$emit('child-msg',this.msg)
}
}
}
2. 父组件通过监听子组件自定义的事件获取子组件传的值
//1. 引入子组件
import child from'./child.vue'exportdefault{
data() {return{
parentMsg:'这是父组件的msg'}
},//2.在父组件的components中注册子组件
components: {
child
},
methods: {
parentFun() {
console.log("这是父组件的方法");
},
getChildMsg(msg) {
console.log("这就是子组件传过来的msg" +msg)
}
}
}
二、父子组件之间相互调用属性或方法
2.1 父组件调用子组件的属性或方法
父组件在使用子组件时可以通过Vue的ref属性获取到子组件对象,从而调用子组件的属性或方法,如下:
父组件:
//1. 引入子组件
import vChild from'./v-child.vue'exportdefault{
data() {return{}
},
components: {
vChild
},
methods: {
useChildMsg() {//2.通过DOM节点获取子组件对象,然后通过子组件对象调用子组件的属性或方法
let child= this.$refs.vChild
console.log(child.msg); //调用子组件的属性
child.showMsg() //调用子组件的方法
}
}
}
子组件:
data() {return{
msg:'这是子组件的msg'}
},
methods: {
showMsg() {
alert("这是v-child组件")
}
}
}
2.2 子组件调用父组件的属性或方法
子组件调用父组件的方法或属性可以直接通过子组件对象的$parent属性获取父组件对象,从而调用父组件的属性或方法。如下:
子组件:
data() {return{
msg:'这是子组件的msg'}
},
methods: {
showMsg() {
alert("这是v-child组件")
},
getParentMsg() {
let parent= this.$parent;//1.获取父组件对象
console.log(parent.msg);//2.调用父组件的属性
parent.showMsg()//3.调用父组件的方法
}
}
}
父组件:
//1. 引入子组件
import vChild from'./v-child.vue'exportdefault{
data() {return{
msg:'这是父组件的msg'}
},
components: {
vChild
},
methods: {
useChildMsg() {//2.通过DOM节点获取子组件对象,然后通过子组件对象调用子组件的属性或方法
let child= this.$refs.vChild
console.log(child.msg);//调用子组件的属性
child.showMsg()//调用子组件的方法
},
showMsg() {
alert('这是父组件的showMsg)
}
}
}
三、总结
3.1 父子组件之间传值
父组件向子组件传值:通过属性传入,子组件通过props定义与传入属性相同的变量接收;
子组件向父组件传值:通过子组件的$emit自定义事件,父组件通过监听子组件定义的事件获取子组件传的值;
3.2 主动调用子组件或主动调用父组件的属性或方法
父组件主动调用子组件的属性或方法:通过父组件的$refs.子组件的ref属性值 来获取子组件对象,从而调用子组件的属性或方法;
子组件主动调用父组件的属性或方法:通过子组件的$parent 获取父组件对象,从而调用父组件的属性或方法