组件传值的八种方式
- 父传子
- 首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受
在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型(type)默认值(default)以及是否必填(required)
- 子传父
首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了
- 兄弟组件
- 利用中央事件总线 eventbus
在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫 b u s 传 数 据 的 时 候 用 t h i s . bus 传数据的时候用this. bus传数据的时候用this.bus. e m i t 传 在 要 接 受 数 据 的 子 组 件 在 c r e a t e d 钩 子 函 数 中 用 emit传 在要接受数据的子组件 在 created钩子函数中 用 emit传在要接受数据的子组件在created钩子函数中用on 方法接收
-
利用 vuex 进行组件通信 把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了
-
其实 v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信
-
a t t r + attr+ attr+listener
如果父组件 A 下面有子组件 B 子组件 B 下面又有子组件 C 如果 a 组件的变量和方法想要传给组件 C 的时候 就用到这个方法 适用于多级组件传值
在 B 组件中给 C 组件绑定 v-bind=“ a t t r s " v − o n = " attrs" v-on=" attrs"v−on="listeners” 然后在 C 组件中就可以直接使用 a 传来的属性和方法了
(简单来说: a t t r s 与 attrs与 attrs与listeners 是两个对象, a t t r s 里 存 放 的 是 父 组 件 中 绑 定 的 非 P r o p s 属 性 , attrs 里存放的是父组件中绑定的非 Props 属性, attrs里存放的是父组件中绑定的非Props属性,listeners 里存放的是父组件中绑定的非原生事件。) -
provide 和 inject
父组件通过通过 provide 提供变量 子组件中通过 inject 注入变量,不论嵌套了几层子组件 都能通过 inject 来调用 provide 的数据
这种写法传的数据是不响应的
-
p a r e n t 和 parent和 parent和children
在子组件内可以直接通过 p a r e n t 对 父 组 件 进 行 操 作 , 在 父 组 件 内 可 以 直 接 通 过 parent对父组件进行操作,在父组件内可以直接通过 parent对父组件进行操作,在父组件内可以直接通过children 对子组件进行操作
在父组件调用子组件时候要加下标也就是$children 是一个数组 因为可以有很多个子组件 -
也能用本地存储 来 完成组件通信
多环境变量
一般分为开发环境和生产环境
development 开发
production 生产(上线)
怎么配置多环境变量
首先建立两个文件 在根目录
.env.dev
里面写上 NODE_ENV=“development”
.env.prod
里面写上 NODE_ENV=“production”
这样我们可以通过 process.env.NODE_ENV 这个变量来判断当前的环境
比如我们可以通过判断不同的环境 在 axios 请求的时候设置不同的 baseURL
在开发的时候使用测试接口
在上线的时候使用真实接口
npm run serve 开启的就是开发环境
npm run build 开启的就是生产环境