1，子组件通过 $emit 调用父组件的 method
// 父组件中定义 @updateInfo 调用的方法
<template>
<user-popup @updateInfo="updateInfo"></user-popup>
</template>
methods: {
updateInfo() {
xxxxxx
},
},
// 子组件在某个方法中进行调用，例如
saveInfomation() {
this.$emit('updateInfo');
},
2，父组件通过 prop 向子组件进行传值
// 父组件内定义传递给子组件的值 userInformation
<template>
<background :message1="messageToHelloWorld"></background>
</template>
data() {
return {
messageToHelloWorld:'我是父组件向下传递的信息332112',
};
},
// 子组件内通过 prop 获取父组件传递的值 userInformation
<template>
{{ message1 }}
</template>
export default {
name: 'HelloWorld',
props: ['message1'],
data () {
return {
}
}
created() {
console.log(this.message1)
},
}
3,父组件通过 $refs 调用子组件的 method
<template>
<child ref="son"></child>
</template>
childMethod();是子组件 里面定义的方法
method: {
parentMethod() {
this.$refs.son.childMethod();
},
},
4,子组件向 父组件 穿参数
这是子组件定义一个方法
<p @click="beijing"> 点击</p>
//方法
methods: {
//向父组件传参
beijing(){
//emitclick 父组件自定义的 事件名字
this.$emit('emitclick','子组件过来的')
}
父组件。
@emitclick="emitclick" 自定义事件名字
<background @emitclick="emitclick"></background>
//方法
methods: {
//自定义事件名字 接受子组件穿过来的参数
emitclick(data){
console.log(data)
},
}
