复习一下vue的子父通信
Posted jerry1208
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了复习一下vue的子父通信相关的知识,希望对你有一定的参考价值。
之前一直没太用,等到用的时候就有点迷糊了,百度了一下,总结一下
**子父通信是通过$emit**
1.给子组件绑定自定义事件@事件名="事件函数" 在事件函数里面通过this.$emit 绑定父组件的事件,再把需要传的值写在里面
2.在父组件中挂载的子组件上绑定父组件的自定义事件,在这个自定义的事件里面接收子组件传过来的值就可以了
***子组件***
<template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> <!--自定义的事件也可以在template里里面写--> </div> </template> <script> export default { data () { return { //将msg传递给父组件 msg: "我是子组件的msg", } }, methods:{ sendMsg(){ //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据 this.$emit(‘func‘,this.msg) } } } <script>
***父组件***
<template> <div class="app"> <child @func="getMsgFormSon"></child> </div> </template> <script> import child from ‘./child.vue‘ export default { data () { return { msgFormSon: "this is msg" } }, components:{ child, }, methods:{ getMsgFormSon(data){ this.msgFormSon = data console.log(this.msgFormSon) } } } </script>
以上是关于复习一下vue的子父通信的主要内容,如果未能解决你的问题,请参考以下文章