vue组件通讯传参的10种实现方式

点击查看原文链接

1.父传子

:msg = msg
props: ['size', 'myMessage'] //不限制数据类型 

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    
    // 多个可能的类型
    propB: [String, Number],
    
    // 必填的字符串
    propC: {
      type: String,
      required: true,
    },
    
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100,
    },
    
    // 数组写法
    propK: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return ["张三"];
      },
    },
    
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: "hello" };
      },
    },
    
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      },
    },
  },

type (常用数据类型)
    String 字符串
    Number 数字
    Boolean 布尔
    Array 数组 
    Object 对象
    Date 日期
    Function 函数
    Symbol 独一无二的值(es6)

    default
      default : (默认值)
      基础数据类型: 直接赋值
      对象数据类型: 用函数赋值 ()=>[]
    required
      required: (必填项)
      默认为false,说明父级必须传入,否则会报错
    validator
     validator: 校验(验证传入的值是否符合规定)

2.子传父1

<!-- 子组件 -->
this.$emit('isUseFatherMet', true)

<!-- 父组件 -->
<first-child @isUseFatherMet="isUseFatherMet"></first-child>

//子组件调用父组件的方法
isUseFatherMet(val) {
  console.log('子组件传值过来了？', val)
},

2.子传父2

我们可以新建一个Bus.js文件，文件暴露一个Vue实例，之后分别在父子组件中导入进来，然后调用。

// Bus.js (把它想象成运送数据的交通工具)
// 没有源码，在别的项目里找的
import Vue from 'vue'
export default new Vue()

<!-- 父组件 -->
import Bus from'../utils/Bus'
Bus.$on('backDmDetail', val => {
  console.log(val);
})

beforeDestroy(){
    //最后不要忘了删除传输事件
    Bus.$off("backDmDetail")
}

<!-- 子组件 -->
import Bus from'../utils/Bus'
Bus.$emit('backDmDetail',"dsdd")

3.兄弟传参1

子传父 - 父传子（结构容易乱，建议使用vuex实现）

3.兄弟传参2

2.1 使用 vm.$on 和 vm.$emit
   就如 标题1.4 所说，导入一个公共的 Bus.js 文件，暴露一个 Vue 实例，在兄弟组件传递时使用 Bus.$on  和 Bus.$emit

注意：暴露一个 Vue 实例，在Vue2.x版本是可以这么使用，但是在Vue3.x中，没有全局的vue，会报警告：“export ‘default’ (imported as ‘Vue’) was not found in ‘vue’”
强势大哥：呵呵，说了这么多，什么什么跟上面一样，有啥用，那我就想用Vue3.x，不想降版本，那咋整？
卑微小弟：别急，哥，有下面的方法：使用第三方库Mitt

npm install -S mitt //先引入依赖

//新建一个Bus.js(这车有空调，手动滑稽)

<!-- 兄弟组件1 -->
import Bus from '@/utils/Bus.js'

//给兄弟组件传值
sendToBrother() {
Bus.emit('toBrotherVal', '我是传向兄弟组件的值')
}


<!-- 兄弟组件2 -->
import Bus from '@/utils/Bus.js'
Bus.on('toBrotherVal', (val) => {
alert(val)
})

//使用完别忘了移除（重复发车不回收，性能耗不起啊。。。）
unmounted() {
//移除toBrotherVal
Bus.off('toBrotherVal')
}

4.爷孙传参

provide/inject： 这对选项要一起使用， 以允许一个祖先组件向其子孙后台注入一个依赖，不管组件层次有多深，并在其上下有关系成立的时间里始终生效（Vue官方文档）。也就是说他们允许父子组件传值、爷孙组件传值

// 使用 provide 和 inject
// 爷爷组件通过provide将自己的数据以对象形式传出去
provide() {
  return {
    parentValue: '我是儿他爹，也是孙他爷'
  }
},
  
//儿子组件接收
inject: {
  // 使用一个默认值使其变成可选项
  parentValue: {
    // 健名
    from: 'parentValue', // 来源
    default: '000' // 默认值( vue2.5.0++ )
  }
},

//孙子组件接收
inject: {
  // 使用一个默认值使其变成可选项
  parentValue: {
    // 健名
    from: 'parentValue', // 来源
    default: '000' // 默认值( vue2.5.0++ )
  }
},

5.路由传参

//  1、命名路由传参
this.$router.push({ name: 'user', params: { user: 'nickname' }});

// 页面接受
this.$route.params

// 2、查询参数传参
this.$router.push({path: '/user', query: {user: "nickname"}});

// 页面接受
this.$route.query

所以，query传参的时候，以path，name引入都是OK的

总结（tips）：
1、使用query传参的时候，name，path都可以引入，但使用params传参的时候只能使用name进行引入。
2、接收参数的时候使用this.$ route.params.name或者this.$ route.query.name
3、进行路由跳转的时候，我们使用this.$ router.push('路径')
4、如果index.js配置路由时，我们能看到，params的参数是URL不可或缺的一部分，但是query的参数是拼接起来的，没有也不影响

6.vuex

7.本地localhost

8.调用子组件中的方法（使用this.$refs.子组件注册名.子组件方法）

this.$refs.child1.showIsUse()