Vue笔记(六)——Vue组件通信Vuex
组件通信
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("父组件自定义事件")
调用父组件传过来的事件
<div id="app"><h1>父组件-{{this.text}}</h1><!-- 子组件 --><child v-on:parentEvent="changeText()"></child>
</div>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{text:''},methods:{changeText(_text){this.text = _text;}},components:{'child':{template:'<p><label>子组件</label><input type="text" v-on:input="change" /></p>',methods:{change(event){this.$emit('parentEvent',event.target.value);}}}}});
</script>
- 调用方法(3) - parent
思路:父组件在调用子组件时用v-on把事件传给子组件,子组件用
this.$parent.父组件事件
<div id="app"><h1>父组件-{{this.text}}</h1><child></child>
</div>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{text:''},methods:{changeText(_text){this.text = _text;}},components:{'child':{template:'<p><label>子组件</label><input type="text" v-on:input="change" /></p>',methods:{change(event){this.$parent.changeText(event.target.value);}}}}});
</script>
兄弟之间的通信
和上面介绍的父子之间通信是一样的,因为任何连个子组件之间都会拥有一个共同的父级组件,所以兄弟组件之间的通信就是子1向父,然后父向子2,这样来达到兄弟之间组件的通信
Vuex - 状态管理通信
跨组件通信的一种实现方式
- 用到就封装一个组件.js
- 组件.js
// 设置属性:state
const state = {count = 0;
}
// 设置方法:mutaions
const 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';
// 引入组件.js
import 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('事件名');
Vue笔记(六)——Vue组件通信Vuex相关推荐
- Vue之非父子组件通信
Vue之非父子组件通信 非父子组件传值方法: 1:在model中新建一个js文件 引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩 源码在文末. 前言 上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
- Vue.js-Day04-AM【父子组件通信(父传子、子传父)、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
- Vue 3.0父子组件通信
在Vue 3.0 发布以后,我们基于新的特性,来归纳一下父子组件通信的方式.并且检验一下Vue 2.0中常用的通信方式,如何在Vue 3.0中使用.本文列出了三种常用的通信方式: 子组件通过emit函 ...
- VUE中的父子组件通信
VUE项目中的父子组件之间的传值. 首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的 ...
- 前端Vue入门-day04-用vue实现组件通信
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 组件的三大组成部分 注意点说明 组件的样式冲突 scoped data 是一个函数 组件通信 什么是组 ...
- Vue笔记(五):Vuex
Vuex-集中式状态管理模式 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 以上是 Vu ...
- vue之非父子组件通信实现方式
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信.这里主要讲两种方式: Provide/Inject Mitt全局事件总线 1.Provide和Inject 应用 ...
- vue中中的组件通信
1.父组件传递给子组件信息props 写法简说:父组件中通过v-bind方法绑定子组件中的props中的方法,然后通过该方法绑定值,下文中的是v-bind:(props_name) = "父 ...
最新文章
- 用 Flask 来写个轻博客 (26) — 使用 Flask-Celery-Helper 实现异步任务
- android xml文件操作类,android操作xml
- assign深拷贝_前端深拷贝和浅拷贝
- html改变输入框的值,一个Input框值改变,另一个显示内容也改变
- java线程池参数含义
- mysql5.7.16安装版_mysql数据库5.7.16安装版怎么安装图解
- [转载] Python高级变量(列表、元组、字典、字符串、公共方法)
- git revert
- [转载]如何做一个出色的程序员
- layui循环遍历数据_layui.laytpl渲染模板,遍历、输出、判断
- java 读取配置文件工具_java读取配置文件信息properties的工具类
- C# string转char数组 string转char[]
- 3500份课后答案,很值得收藏,这里只介绍了一部分。
- DS4Windows(电脑PS4手柄控制器)v2.2.6 中文版
- Opencv2.4.9源码分析——Stitching(七)
- Bootstrap3源码分析
- 【Flutter实战静态页面】--在线点餐app(8)——详情框架1
- 微软Surface Go 体验:可以当平板使用的便携笔记本电脑
- 华为云HCS解决方案笔记HUAWEI CLOUD Stack【面试篇】
- android sqlite #039;,问题详情_百度云推送_免费专业最精准的移动推送服务平台
热门文章
- 武汉超级计算机中心,加快打造“五个中心” 武汉率先开建人工智能计算中心...
- C++(STL):23 ---序列式容器queue源码剖析
- c++基础学习(12)--(多线程、Web编程)
- 《UNIX环境高级编程 3rd》笔记(1 / 21):UNIX基础知识
- php ajax队列,AJAX请求队列实现
- 密码学专题 信息摘要和数字签名指令
- 使用gtest进行自己的单独测试的代码介绍
- 解决:Unable to identify index name. XXXModel is not a Document. Make sure the document class is annota
- JAVA使用FTPClient类读写FTP
- 本地Android源代码库下载源码