博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue笔记(六)——Vue组件通信&Vuex
阅读量:7080 次
发布时间:2019-06-28

本文共 1471 字,大约阅读时间需要 4 分钟。

组件通信

vue本身的组件通信

  • 父==>子:父组件向子组件传参或者调用子组件的方法
  • 子==>父:子组件向父组件传参或者调用父组件的方法
  • 兄弟之间:兄弟组件之间传参或者调用方法

父子通信

  • 传参 - props
思路:定义子组件的属性(自定义),父组件赋值给子组件
  • 调用方法(1) - $refs
思路:定义子组件的属性-ref="a",父组件通过:
this.$refs.a.子组件方法();
  • 调用方法(2) - children
思路:父组件通过:
this.$children[0].子组件方法();

子父通信

  • 调用方法(1) - $parent.$emit("父组件自定义事件");
思路:父组件在组件的生命周期(mounted)用$on定义事件,子组件用
this.$parent.$emit("父组件自定义事件");
  • 调用方法(2) - $emit("父组件自定义事件");
思路:父组件在调用子组件时用v-on把事件传给子组件,子组件用
this.$emit("父组件自定义事件")调用父组件传过来的事件

父组件-{
{this.text}}

  • 调用方法(3) - parent
思路:父组件在调用子组件时用v-on把事件传给子组件,子组件用
this.$parent.父组件事件

父组件-{
{this.text}}

兄弟之间的通信

和上面介绍的父子之间通信是一样的,因为任何连个子组件之间都会拥有一个共同的父级组件,所以兄弟组件之间的通信就是子1向父,然后父向子2,这样来达到兄弟之间组件的通信

Vuex - 状态管理通信

跨组件通信的一种实现方式
  • 用到就封装一个组件.js
  • 组件.js
// 设置属性:stateconst state = {    count = 0;}// 设置方法:mutaionsconst mutaions = {    increment(_state){        _state.count += 1;    }}// 执行方法const actions = {    increment(_content){        _content.commit('increment');    }}// 暴露export default{    state,    mutaions,    actions}
  • 集合实例化 store.js
import Vue from 'Vue';import Vuex from 'vuex';// 引入组件.jsimport transition from './transion.js';// 实例化对象const store = new Vue.Store({    modules:{        transition    }});// 暴露对象export default store;
  • 主入口app.js实例化vuex对象
// 引入vuex对象import store from './vuex/store.js';// 实例化vuex对象new Vue({    el:"#app",    router,    store,    render:h=>h(app)});
  • 各组件之间调用

1.调用参数

$store.state.组建名.属性

2.调用方法

$store.dispatch('事件名');

转载地址:http://ecvml.baihongyu.com/

你可能感兴趣的文章
assert()函数
查看>>
实战 Lucene,第 1 部分: 初识 Lucene
查看>>
我的友情链接
查看>>
关于表空间offline小知识点
查看>>
Android帧缓冲区(Frame Buffer)硬件抽象层(HAL)模块Gralloc的实现原理分析(7)...
查看>>
Statusbar Navigationbar 大小
查看>>
GBBS微论坛getshell
查看>>
拟合程度的评估--判定系数
查看>>
DELL 服务器硬件资源上报-OMSA系统命令介绍
查看>>
traceroute命令
查看>>
1258:【例9.2】数字金字塔_方法二:记忆化搜索
查看>>
flume架构详解
查看>>
Import a large sql dump file to a MySQL database from command line
查看>>
Sybase IQ-15_1本地登录问题之interfaces文件配置及数据文件权限
查看>>
浅谈malloc()函数的用法
查看>>
lua1 基础1
查看>>
引用传递和值传递,克隆
查看>>
我的友情链接
查看>>
阿萨德阿斯顿的的点点滴滴
查看>>
OPC UA 统一架构学习
查看>>