VUE 父子组件之间通信传值 props和 $emit

时间:2022-03-30 10:17:20

1、父组件传值给子组件 $props,子组件传值给父组件 $emit

父组件
         <div id="app" >
              <tree-component @func="getMsgFormSon" :childmsg="fatherParams"></tree-component> //引入的子组件,fatherParams 是要传给子组件的值(字符串、对象、方法都可以传)
         </div>
    var vm = new Vue({
        el:'#app',
        data:{
           fatherParams:'我是你爹'
        },
        methods:{
          getMsgFormSon(data){
            console.log(data) //data 就是从子组件传过来的数据
          }
        }
    })
子组件

    Vue.component('tree-component', {
        props:['childmsg'], //接收父组件传过来的值
        data(){
           return {
              childParams:'我是子组件信息'
           } 
        },
        created:function(){
              console.log(this.childmsg) //在初始化的是就可以输出 ‘我是你爹’ 这个服组件传过来的值了
           },
         template:'<div @click='passToFather()'></div>
         methods:{
            var self=this
            passToFather(){
              self.$emit('func',self.childParams) // self.childParams 是传给父组件的数据
            }
         }
    })
 

$smit可以传递参数也可以传递事件

VUE 父子组件之间通信传值 props和 $emit

VUE 父子组件之间通信传值 props和 $emit

点击事件动态传值 ref

父组件

VUE 父子组件之间通信传值 props和 $emit

ref 获取到子组件的信息

VUE 父子组件之间通信传值 props和 $emit

子组件

VUE 父子组件之间通信传值 props和 $emit

二、兄弟之间传值eventBus

eventBus是一个传值总线,可以实现兄弟组件之间的传值通信,具体原理还没深入研究

基本用法:

在项目src下面的assete下建一个eventBus.js文件

VUE 父子组件之间通信传值 props和 $emit

在需要传值的A、B组件内引入

VUE 父子组件之间通信传值 props和 $emit

在组件A中定义一个点击事件触发传值

VUE 父子组件之间通信传值 props和 $emit

VUE 父子组件之间通信传值 props和 $emit

在B组件接收A组件传过来的值

VUE 父子组件之间通信传值 props和 $emit

VUE 父子组件之间通信传值 props和 $emit