使用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 ...
随机推荐
- 清北考前刷题da7下午好
三向城 /* 原图一定是一棵完全二叉树. 根节点是x,左节点是x*2,右节点是x*2+1 转化为二进制往左右走就很明显了. */ #include<iostream> #include&l ...
- crosswalk 初步使用
这里简单的说下 crossWalk 的配置; 我在学习 crosswalk 的时候,看到一篇博客,他所记录的已经是很完整的教程了: 点击查看 本文就根据该博客和官网说明,进行部分修改,补充; 首先 c ...
- PWA技术深入学习
PWA技术 PWA全称Progressive Web App,即渐进式WEB应用. 解决的问题 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能 可以添加至主屏幕,点击主屏幕图标可以实 ...
- 基于.Net Core的API框架的搭建(3)
5.加入缓存支持 我们希望为项目增加缓存支持,我们选择Redis做为缓存数据库. 首先,我们在Services目录增加一个缓存接口类ICacheService: using System; using ...
- 微信公众号 sign类
微信公众号 Sign import java.util.UUID; import java.util.Map; import java.util.HashMap; import java.util.F ...
- [Offer收割]编程练习赛84 -- 括号序列
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含'(', ')'和''的字符串S,现在小Hi可以任意指定''为'('或')',不同的'*'可以是不同的字符. ...
- PROTEUS快捷键与部分知识点
缩放 有以下几种方法对原理图进行缩放: 移动鼠标需要所放的地方,滚动鼠标滑轮进行缩放. 移动师表需要缩放的地方,按键盘F6放大,F7缩小 按下ShIFT键,鼠标左键拖拽出需要放大的区域,这叫SHIFT ...
- map Codeforces Round #Pi (Div. 2) C. Geometric Progression
题目传送门 /* 题意:问选出3个数成等比数列有多少种选法 map:c1记录是第二个数或第三个数的选法,c2表示所有数字出现的次数.别人的代码很短,思维巧妙 */ /***************** ...
- {Python}安装第三方包(setup.py)
在github上下载了records文件到本地. 解压文件 cmd切换到文件setup.py的目录下 先执行 python setup.py build 再执行python setup.py inst ...
- 全面学习ORACLE Scheduler特性(12)使用Windows和Window Groups
七.使用Windows 此Windows非彼Windows,通常说的Windows是指盖首富的操作系统,而此处所说的Windows,是指SCHEDULER特性中的一个子项.在SCHEDULER中,WI ...