使用vuex实现父组件调用子组件方法
曲线救国。
核心原理就是父子共用一个vuex对象,且看代码:
父组件parent.vue
<template>
<div class="wrap">
<form action="">
<input type="text" v-model="searchParam.name">
<input type="text" v-model="searchParam.id">
<button @click="search"></button>
</form>
<child></child>
</div>
</template> <script>
import store from '@/vuex'; export default {
name: 'parent',
store,
components: {
'child': () => import('./child.vue'),
},
data () {
return this.$store.state.parent;
},
methods: {
search () {
this.$store.dispatch('search');
}
}
};
</script> <style lang="less" scoped> </style>
子组件 child.vue
<template>
<ul v-if="list && list.length">
<li class="river-item" v-for="item in list">{{item}}</li>
</ul>
</template> <script> export default {
name: 'child',
created () {
this.$store.dispatch('getData');
},
data() {
return this.$store.state.child;
}
};
</script> <style lang="less" scoped> </style>
vuex.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({
state: {
parent: {
searchParam: {
name: '',
id: ''
}
},
child: {
pageIndex: 1,
pageTotal: 0
list: []
}
},
actions: {
// 父组件的搜索方法
search({commit, dispatch, state}) {
// 重置子组件的列表
state.child.pageIndex = 1;
state.child.list = [];
dispatch('getData');
}
// 子组件的获取数据方法
getData ({commit, dispatch, state}) {
fetch('http://test.com', {
method: 'POST',
// 使用父组件的参数(连传递props都省了 -_-!)
body: state.parent.searchParam
}).then(res => res.json()).then(data => {
state.child.list = data;
});
} }
});
父组件和子组件的data及method都写到vuex里面去了,数据共享,这样父组件就可以调用vuex里面的action来修改子组件的data了!
使用vuex实现父组件调用子组件方法的更多相关文章
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- react 父组件调用子组件方法
import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...
- 父组件调用子组件 viewChild
父组件调用子组件 1.在子组件的ts中声明一个变量 public lineout:any="你好,我是被父组件调用的子组件"; 2.在父组件的html中写入 (引入子组件) & ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- Vue3 父组件调用子组件的方法
Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...
- React 父组件调用子组件的方法
父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...
随机推荐
- 洛谷 P1131 [ ZJOI 2007 ] 时态同步 —— 树形DP
题目:https://www.luogu.org/problemnew/show/P1131 记录 x 子树内同步的时间 f[x],同步所需代价 g[x]: 直接转移即可,让该儿子子树与其它儿子同步, ...
- 9. Ext基础1 -- Ext中 getDom、get、getCmp的区别
转自:https://blog.csdn.net/huobing123456789/article/details/7982061 要学习及应用好Ext框架,必须需要理解Html DOM.Ext El ...
- 12. Ext.Ajax 对ajax的支持
转自:http://www.cnblogs.com/lipan/archive/2011/12/09/2272793.html 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封 ...
- Nginx(三) 常用配置整理
#定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...
- js 事件循环机制 EventLoop
js 的非阻塞I/O 就是由事件循环机制实现的 众所周知 js是单线程的 也就是上一个任务完成后才能开始新的任务 那js碰到ajxa和定时器.promise这些异步任务怎么办那?这时候就出现了事件 ...
- [CREC2007/CQOI2014]robotic sort
Description 一个实验室里有n个长短不一的试管.你的任务是编写一段程序,用机器臂把它们按照高度从小到大的顺序排列. 对于高度相同的试管,排序前后的相对位置应保持不变.排序方法如图所示. 排序 ...
- 贪心 Codeforces Round #135 (Div. 2) C. Color Stripe
题目传送门 /* 贪心:当m == 2时,结果肯定是ABABAB或BABABA,取最小改变量:当m > 2时,当与前一个相等时, 改变一个字母 同时不和下一个相等就是最优的解法 */ #incl ...
- IIS 相关配置
IIS 和 VS 安装顺序 正常情况是先装IIS,后装VS:这样就不会发生错误了,因为asp.net就可以注册写入到IIS中.如果先装VS,再装IIS,这样就会导致"访问IIS元数据库失败& ...
- sql 获取当前季度期间
select year(getdate())*10000+((month(getdate())/3)*3+1)*100 + 1 --季度第一天 select year(getdate())*10000 ...
- LN : leetcode 241 Different Ways to Add Parentheses
lc 241 Different Ways to Add Parentheses 241 Different Ways to Add Parentheses Given a string of num ...