vue传值总结

一、父组件 向 子组件传值

1、父组件调用子组件的时候,在子组件身上绑定动态属性
<template>
    <div>
        <Child :title="title"> </Child>//子组件
    </div>
</template>
2、在对应的子组件中,通过props属性接收传递过来的值
props:{
        title:{
            type:String,
            default:'我是标题'
        }
}
3、在子组件中使用该值
<div>{{title}}</div>
总结:props传递数据原则:单向数据流。不推荐子组件直接操作父组件传递过来的数据。

二、子组件 向 父组件中传值

1、子组件 通过自定义事件向父组件传递信息
//子组件 Child.vue
<button @click="changeLarge">扩大父组件的字号</button> 

methods:{
        changeLarge(){
            this.$emit('enlargetxt',5)   //enlargetxt 是自定义事件名称,5是传递的参数。用$event接收,如下图。
        }
}
2、父组件 监听子组件的事件 // 子组件 调用 父组件的方法
<template>
    <div class="parent">
        <Child  @enlargetxt="handle($event)"/>  //@ 后面是自定义事件名称,$event 是实参,对应于上面传来的 5
        <p  :style="{fontSize:fontSize+'px'}">132456789</p>
    </div>
</template>

methods:{
       
        handle($event){  //$event此处是形参,可用任意参数
              this.fontSize+=$event;
        }
    }

三、兄弟组件通信

1.定义一个公共文件 eventBus.js
import Vue from 'vue'
export default new Vue()
2.在需要通信的同级组件中分别引入eventBus.js文件
import eventBus from '../eventBus.js'
3.发出数据的组件 Son1.vue
<button @click="emitSon2">发出数据</button>

//方法
methods:{
    emitSon2(){
        eventBus.$emit('toSon2',this.name)
    }
}

4.接收数据的组件 son2.vue
mounted:{
    eventBus.$on("toSon2", (data) => {
          console.log(data)
    });
}
总结:1、触发事件 eventBus.$emit('todo',this.name) 2、监听事件 eventBus.$on('todo',function(data){ }) 3、如果有需要,还可以销毁事件eventBus.$off('todo')



主动获取数据部分

一、父组件 主动获取 子组件的数据和方法

1、父组件调用子组件的时候,在子组件身上定义ref
<template>
    <div>
        <Child ref="childId"> </Child>//子组件
        //注:ref相当于dom里的id,在js里边调用方式是:this.$refs.childId
    </div>
</template>
2、在父组件调用子组件的数据和方法
this.$refs.childId.数据或方法

二、子组件 主动获取 父组件的数据和方法

在子组件里边
this.$parent.数据或者方法
posted @ 2020-03-03 14:18  麦子同学  阅读(394)  评论(0编辑  收藏  举报