父子组件通信(vuex的方式)
转: https://blog.csdn.net/lzh5997/article/details/80407518
父子组件也可以通过vuex的进行来进行中转,其实vuex就类似与一个仓库,父组件把东西放到仓库,然后子组件,从仓库里面去出东西,因为子组件里面是通过计算属性来获取的值(具有实时性),一旦父组件重新改变了数据,子组件就会重新从vuex里面读取数据
father.vue
<template>
<div>
<h4>父组件</h4>
<child></child>
<button @click="transmitData">通过vuex给子组件传值</button>
</div>
</template> <script>
import Child from './child.vue'
export default {
components: {
Child
},
data() {
return {
testData: '我是父组件传递给子组件的值'
}
},
methods: {
transmitData() {
// 通过commit提交数据改变vuex里面的数据
this.$store.commit('fatherData', this.testData)
}
}
}
</script> <style scoped> </style>
child.vue
<template>
<div>
<p v-if="_fatherData === null">暂无数据</p>
<p v-else>{{_fatherData}}</p>
</div>
</template> <script>
export default {
computed:{
_fatherData(){
// 读取store里面的值
return this.$store.state.fatherDatas
}
}
}
</script> <style scoped> </style>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) const store = new Vuex.Store({
// 初始化的数据
state: {
fatherDatas: null
},
// 改变state里面的值得方法
mutations: {
fatherData(state, data) {
state.fatherDatas = data
}
}
})
// 输出模块
export default store
父子组件通信(vuex的方式)的更多相关文章
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- 关于React的父子组件通信等等
//==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
随机推荐
- HyperLedger Explore 浏览器配置启动教程
Hyperledger Fabric维护的实际上是一个区块链网络.为了能够直观的观察网络上的节点,交易等行为,Hyperledger Explore随之诞生. 本文讲述如何搭建 Hyperledger ...
- [CodeChef] The Street
给定两个长度为n的数列A和B,开始数组A中每一项值为0,数组B中每一项值为负无穷大.接下来有m次操作:1.数组A区间加一个等差数列:2.数组B区间对一个等差数列取max:3.询问ai+bi的值.n&l ...
- uoj #5. 【NOI2014】动物园
#5. [NOI2014]动物园 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的园长决定开设算法班,让 ...
- [AHOI2009]飞行棋 BZOJ1800
题目描述 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依圆周顺序排列. 请找出这些点中有没有可以围成矩形的,并希望在最短时间内找出所有不重复矩形. 输入输出格式 输入格式: 第一行为 ...
- git教程3-分支
https://git-scm.com/book/zh/v1/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%9A%84%E7%AE%A1%E7%90%86 ...
- 4、python数据类型之列表(list)
列表列表常见操作1.索引取值 name_list = ['wang','zhou','li','hu','wu','zhao'] print(name_list[0]) print(name_list ...
- jap的教程
第一个资料: https://wenku.baidu.com/view/5ca6ce6a1eb91a37f1115cee.html 第二个资料 :http://www.yiibai.com/jpa ...
- ip route,ip rule, iptables和docker的端口映射
iptables 默认5个表, 不可增加其他表 raw 用于配置数据包,raw 中的数据包不会被系统跟踪. filter 是用于存放所有与防火墙相关操作的默认表. nat 用于 网络地址转换(例如:端 ...
- JAVA多线程之Semaphore
Semaphore:动态增减信号量,用于控制对某资源访问的同一时间的并发量.类似于令牌,谁拿到令牌(acquire)就可以去执行了,如果没有令牌则需要等待. [如何获取]:semaphore.tryA ...
- javascript模块化编程规范
一.javascript模块化编程规范: 二.关于commenjs规范和AMD规范: 根本不同:前者用于服务器端同步加载模块:后者是客户端异步加载模块. 同点:两者都有一个全局函数require(), ...