之前写过一篇关于基于 微信小程序的父子组件传值通信与事件触发，今天整理一片关于 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种方式
1、父组件给子组件通信
实现思路：子组件通过 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来接收，这样子组件就接收到了父组件传递过来的值了。子组件接收的父组件的值分为引用类型和普通类型两种：
- 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
- 引用类型：数组（Array）、对象（Object）
// 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事件
2、子组件向父组件通信
实现思路：通过在子组件中使用 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>
点击子组件中的“子组件将值传递给父组件”，就可看到如下效果：
3、父组件 通过 $refs / $children 来获取子组件值
4、子组件通过 $parent 来获取父组件实例的属性和方法
5、$attrs 和 $listeners 获取父组件实例属性和和方法（组件嵌套情况下使用）
6、跨组件之间传值
7、Vuex
8、provide 和 inject 实现父组件向子孙组件传值。（层级不限）
三、父子组件事件触发
父组件调用子组件中的事件方法
-
通过
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 父子组件之间大部分的操作都涉及到了，我们在程序的开发过程中对于该部分内容可以游刃有余了。
之前还写过一篇关于微信小程序的父子组件传值通信与事件触发 的文章，感兴趣的小伙伴可以前往查看。
希望以上内容可以帮助到大家。有任何问题欢迎讨论留言。
各位 加油！
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
