之前写过一篇关于基于 微信小程序的父子组件传值通信与事件触发,今天整理一片关于 Vue 的父子组件的相关内容。
<template>
<div style="border:1px solid black;width:400px; height: 130px;">
<h3>我是子组件h3>
<button>子组件将值传递给父组件button>
<div>子组件接收父组件的值:div>
div>
template>
<template>
<div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
<h3>我是父组件h3>
<div>子组件向父组件传递的值:div>
<Child>Child>
div>
template>
<script>
import Child from './Child';
export default {
components: {
Child
}
}
script>
效果展示:
通过这张图可以看出父子组件的结构,下面我们来实习父子组件通信。
参考文章:Vue 组件通信的8种方式
实现思路:子组件通过 props
来接受父组件传过来的值。
在父组件中,定义一个data变量,在子组件标签中动态绑定这个值。
// Father.vue
<template>
<div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
<h3>我是父组件h3>
<div>子组件向父组件传递的值:{{ChildMsg}}div>
<Child :FatherMsg="data">Child>
div>
template>
<script>
import Child from './Child';
export default {
data() {
return {
data: 'I am your father',
}
},
components: {
Child
}
}
script>
接着在子组件里通过 props
来接收,这样子组件就接收到了父组件传递过来的值了。
子组件接收的父组件的值分为引用类型和普通类型两种:
// Child.vue
<template>
<div style="border:1px solid black;width:400px; height: 130px;">
<h3>我是子组件h3>
<button>子组件将值传递给父组件button>
<div>父组件向子组件传递的值:{{FatherMsg}}div>
div>
template>
<script>
export default {
data() {
return {
data: 'I am your children',
}
},
props: ['FatherMsg']
}
script>
由于 Vue 是 单向数据流,子组件是不能直接修改父组件的值。如果子组件要修改来自父组件的值,不能直接修改,要通过事件进行修改:
props
配合 $emit
改变父组件传入的值
在父组件传入值时,需要有 .sync
修饰符(.sync
修饰符是事件绑定的语法糖);
子组件可以在$emit('父组件方法名', 传递的参数)
,派发事件修改传入的值;
v-model
配合 input
事件(v-model详解)
v-model
原则上也是利用 $emit
以及 $on
v-model
会默认绑定 input
事件
实现思路:通过在子组件中使用 this.$emit(‘函数名’, 传递参数)
来触发自定义事件并传值,然后在父组件中监听该事件即可。
在子组件中给 button 按钮添加 click 事件,来通过 this.$emit
自定义事件,并传入一个参数:
<template>
<div style="border:1px solid black;width:400px; height: 130px;">
<h3>我是子组件h3>
<button @click="send">子组件将值传递给父组件button>
<div>父组件向子组件传递的值:{{FatherMsg}}div>
div>
template>
<script>
export default {
data() {
return {
data: 'I am your children',
}
},
props: ['FatherMsg'],
methods: {
send() {
this.$emit('ListenChild', this.data);
}
}
}
script>
在父组件中的子组件标签里,先在 data
里定义一个变量接收这个值,然后监听在子组件中自定义的事件,并接受这个参数赋值给定义的变量:
<template>
<div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
<h3>我是父组件h3>
<div>子组件向父组件传递的值:{{ChildMsg}}div>
<Child :FatherMsg="data" @ListenChild="ListenChild">Child>
div>
template>
<script>
import Child from './Child';
export default {
data() {
return {
data: 'I am your father',
ChildMsg: '',
}
},
components: {
Child
},
methods: {
ListenChild(data) {
console.log("子组件传递过来的值:" , data);
this.ChildMsg = data;
}
}
}
script>
点击子组件中的“子组件将值传递给父组件”,就可看到如下效果:
$refs
/ $children
来获取子组件值$parent
来获取父组件实例的属性和方法$attrs
和 $listeners
获取父组件实例属性和和方法(组件嵌套情况下使用)通过 ref
直接调用子组件的方法:
// Child.vue
<template>
<div style="border: 1px solid black; width: 150px; margin: 10px auto">
我是子组件
<div style="color: red"> {{ msg }} div>
div>
template>
<script>
export default {
data() {
return {
msg: '',
}
},
methods: {
childFun() {
console.log('我是子组件的方法 childFun');
this.msg = '我的方法被调用了'
},
},
};
script>
在子组件标签上添加 ref
属性,然后在方法中通过 this.$refs
找到绑定 ref
的属性调用该子组件内的方法即可。
// Father.vue
<template>
<div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
我是父组件
<Button @click="handleClick">点击调用子组件方法Button>
<Child ref="child" />
div>
template>
<script>
import Child from './Child';
export default {
components: {
Child
},
methods: {
handleClick() {
this.$refs.child.childFun();
},
},
}
script>
通过组件的 $emit
、$on
方法:
// Child.vue
<template>
<div style="border: 1px solid black; width: 150px; margin: 10px auto">
我是子组件
<div style="color: red"> {{ msg }} div>
div>
template>
<script>
export default {
data() {
return {
msg: '',
}
},
mounted() {
this.$on('childFun', function() {
console.log('我是子组件方法');
this.msg = '我的方法被调用了'
});
}
};
script>
在子组件中使用 $on
绑定一个方法,然后在父组件中通过 $emit
找到绑定 $on
上面的事件名即可,但是也需要 ref
的配合。
// Father.vue
<template>
<div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
我是父组件
<Button @click="handleClick">点击调用子组件方法Button>
<Child ref="child" />
div>
template>
<script>
import Child from './Child';
export default {
components: {
Child
},
methods: {
handleClick() {
//子组件$on中的名字
this.$refs.child.$emit("childFun")
},
},
}
script>
两种实现方式效果一致。
直接在子组件中通过 this.$parent
来调用父组件的方法
// Father.vue
<template>
<div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
我是父组件
<Child>Child>
<div style="color: red"> {{ msg }} div>
div>
template>
<script>
import Child from './Child';
export default {
data() {
return {
msg: ''
}
},
components: {
Child
},
methods: {
fatherMethod() {
console.log('我的父组件中的方法');
this.msg = '我的方法被子组件调用了';
}
}
};
script>
// Child.vue
<template>
<div style="border: 1px solid black; width: 150px; margin: 10px auto">
我是子组件
<button @click="childMethod">点击调用父组件方法button>
div>
template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
script>
在子组件里用 $emit
向父组件触发一个事件,父组件监听这个事件(推荐使用)
// Father.vue
<template>
<div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
我是父组件
<Child @fatherMethod="fatherMethod">Child>
<div style="color: red"> {{ msg }} div>
div>
template>
<script>
import Child from './Child';
export default {
data() {
return {
msg: ''
}
},
components: {
Child
},
methods: {
fatherMethod() {
console.log('我的父组件中的方法');
this.msg = '我的方法被子组件调用了';
}
}
};
script>
子组件可以使用 $emit
触发父组件的自定义事件。
// Child.vue
<template>
<div style="border: 1px solid black; width: 150px; margin: 10px auto">
我是子组件
<button @click="childMethod">点击调用父组件方法button>
div>
template>
<script>
export default {
methods: {
childMethod() {
// fatherMethod父组件方法
this.$emit('fatherMethod');
}
}
};
script>
父组件把方法传入子组件中,在子组件里直接调用这个方法:
// Father.vue
<template>
<div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
我是父组件
<Child :fatherMethod="fatherMethod">Child>
<div style="color: red"> {{ msg }} div>
div>
template>
<script>
import Child from './Child';
export default {
data() {
return {
msg: ''
}
},
components: {
Child
},
methods: {
fatherMethod() {
console.log('我的父组件中的方法');
this.msg = '我的方法被子组件调用了';
}
}
};
script>
父组件可以将事件绑定到子组件标签上,子组件使用 props
接收父组件的事件。
// Child.vue
<template>
<div style="border: 1px solid black; width: 150px; margin: 10px auto">
我是子组件
<button @click="childMethod">点击调用父组件方法button>
div>
template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
if (this.fatherMethod) {
this.fatherMethod();
}
}
}
};
script>
以上三种实现方式效果一致。
至此,Vue 父子组件之间大部分的操作都涉及到了,我们在程序的开发过程中对于该部分内容可以游刃有余了。
之前还写过一篇关于微信小程序的父子组件传值通信与事件触发 的文章,感兴趣的小伙伴可以前往查看。
希望以上内容可以帮助到大家。有任何问题欢迎讨论留言。
各位 加油!