美文网首页vue-cli踩坑记
vue组件之间的传值方式

vue组件之间的传值方式

作者: 这苹果太难吃了就吃了一口 | 来源:发表于2018-07-24 13:37 被阅读0次

父传子:

   父组件中引入了子组件import 组件名(标签名)from ‘路径’,在父组件中子组件标签上定义一个动态的自定义属性(在属性前面加上v-bind:或 :)  (<children :message = 'mess'></children>); 在子组件中用prop接收自定的属性message,可以是回调函数可以在子组件的事件中触发父组件中的事件。 prop:{message: [String,Array,Object,Function,Number]}

  如果要在父组件中触发子组件的事件,可以用ref在父组件的子组件上进行标记(<children ref='child'> </children>),从而获得子组件的实力对象(this.$refs.child类似于document.getElementById('名字'),this.$refs.child.fn()调用子组件里的函数)。

子传父:

    子组件的事件中导出一个自定义事件this.$emit('自定事件名',要传的参数);父组件的子组件上绑上事件<children @自定事件名='你取的函数名'></chilren>,在你取的函数名内实现传值。

兄弟:

    你可以写一个bus中间件,this.$bus.emit('导出函数',参数)=》this.$bus.on('导出函数', this.fn)=> this.$bus.off('导出函数', this.fn)

(有所不足,以后补充详细)

vuex:单独讲

相关文章

  • Uniapp兄弟组件传值

    兄弟组件a.vue和b.vue之间的传值方式 a.vue b.vue

  • vue 6种通信总结①

    常用vue通信大概有这几种方式进行: 组件间的父子之间的传值 组件间的子父之间的传值 非组件间的组件间的传值(简称...

  • vue通信、传值的多种方式

    组件之间传值方式 页面间之间传值方式

  • 组件通信

    vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值 1.父子之间传值:可以使用$emit/props...

  • 前端基础搬运工-VUE模块

    十、VUE模块 基础部分 1. Vue组件间传值 答: -[ ] 1.父子之间的传值 父组件向子组件传值通过p...

  • Vue.js 父子组件传值 . 兄弟组件传值

    概述 vue中组件之间的传值传值情况主要有以下三种 父组件向子组件传值子组件向父组件传值兄弟组件之间相互传值或者是...

  • vue 中几种传值方法

    前言 vue项目中,组件跟组件之间数据的传递是很普遍的行为,在这里总结几种常见的vue组件跟组件之间传值方式,其中...

  • 03-vue组件传值

    基于现在都是模块化开发,vue开发过程中组件之间传值是必不可少的,常用的vue的组件传值分为三种方式:父传子、子传...

  • Vue组件之间的传值

    Vue父子组件之间的传值(props)兄弟组件 VUEX

  • 花里胡哨的vue传值

    前言 在vue项目中,不可避免的会在不同组件之间进行传值 ,不同需求下有各式各样的传值方式。就比如说,兄弟组件传值...

网友评论

    本文标题:vue组件之间的传值方式

    本文链接:https://www.haomeiwen.com/subject/bovemftx.html