使用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 ...
随机推荐
- HDU 5073 数学题
题目传送门 http://acm.hdu.edu.cn/showproblem.php?pid=5073 这道题RE了好多发啊囧,RE到精神不振. Galaxy的质心并不是一成不变的,随着一些星球的移 ...
- go语言---map
go语言---map https://blog.csdn.net/cyk2396/article/details/78890185 一.map的用法: type PersonDB struct { I ...
- URAL1553 Caves and Tunnels 树链剖分 动态树
URAL1553 维护一棵树,随时修改某个节点的权值,询问(x,y)路径上权值最大的点. 树是静态的,不过套动态树也能过,时限卡的严就得上树链剖分了. 还是那句话 splay的核心是splay(x) ...
- 你想知道的关于JavaScript作用域的一切
原文: https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ JavaScript中有许多章节是关于s ...
- STM32: TIMER门控模式控制PWM输出长度
搞了两天单脉冲没搞定,无意中发现,这个利用主从模式的门控方式来控制一路PWM的输出长度很有效. //TIM2 PWM输出,由TIM4来控制其输出与停止 //frequency_tim2:TIM2 PW ...
- Spark GraphX 属性图操作
package Spark_GraphX import org.apache.spark.graphx._ import org.apache.spark.rdd.RDD import org.apa ...
- bzoj 1800: [Ahoi2009]fly 飞行棋【枚举】
在圆里所以没有平行四边形,n^4枚举点即可 #include<iostream> #include<cstdio> using namespace std; const int ...
- [Swift]通天遁地Swift
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 二分搜索poj106
Cable master Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 49944 Accepted: 10493 De ...
- 题解报告:hdu 1010 Tempter of the Bone
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1010 Problem Description The doggie found a bone in a ...