曲线救国。

核心原理就是父子共用一个vuex对象,且看代码:

父组件parent.vue

  1. <template>
  2. <div class="wrap">
  3. <form action="">
  4. <input type="text" v-model="searchParam.name">
  5. <input type="text" v-model="searchParam.id">
  6. <button @click="search"></button>
  7. </form>
  8. <child></child>
  9. </div>
  10. </template>
  11.  
  12. <script>
  13. import store from '@/vuex';
  14.  
  15. export default {
  16. name: 'parent',
  17. store,
  18. components: {
  19. 'child': () => import('./child.vue'),
  20. },
  21. data () {
  22. return this.$store.state.parent;
  23. },
  24. methods: {
  25. search () {
  26. this.$store.dispatch('search');
  27. }
  28. }
  29. };
  30. </script>
  31.  
  32. <style lang="less" scoped>
  33.  
  34. </style>

子组件 child.vue

  1. <template>
  2. <ul v-if="list && list.length">
  3. <li class="river-item" v-for="item in list">{{item}}</li>
  4. </ul>
  5. </template>
  6.  
  7. <script>
  8.  
  9. export default {
  10. name: 'child',
  11. created () {
  12. this.$store.dispatch('getData');
  13. },
  14. data() {
  15. return this.$store.state.child;
  16. }
  17. };
  18. </script>
  19.  
  20. <style lang="less" scoped>
  21.  
  22. </style>

vuex.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3.  
  4. Vue.use(Vuex);
  5.  
  6. export default new Vuex.Store({
  7. state: {
  8. parent: {
  9. searchParam: {
  10. name: '',
  11. id: ''
  12. }
  13. },
  14. child: {
  15. pageIndex: 1,
  16. pageTotal: 0
  17. list: []
  18. }
  19. },
  20. actions: {
  21. // 父组件的搜索方法
  22. search({commit, dispatch, state}) {
  23. // 重置子组件的列表
  24. state.child.pageIndex = 1;
  25. state.child.list = [];
  26. dispatch('getData');
  27. }
  28. // 子组件的获取数据方法
  29. getData ({commit, dispatch, state}) {
  30. fetch('http://test.com', {
  31. method: 'POST',
  32. // 使用父组件的参数(连传递props都省了 -_-!)
  33. body: state.parent.searchParam
  34. }).then(res => res.json()).then(data => {
  35. state.child.list = data;
  36. });
  37. }
  38.  
  39. }
  40. });

父组件和子组件的data及method都写到vuex里面去了,数据共享,这样父组件就可以调用vuex里面的action来修改子组件的data了!

使用vuex实现父组件调用子组件方法的更多相关文章

  1. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  2. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  3. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  4. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  5. 父组件调用子组件 viewChild

    父组件调用子组件 1.在子组件的ts中声明一个变量 public  lineout:any="你好,我是被父组件调用的子组件";  2.在父组件的html中写入 (引入子组件) & ...

  6. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  7. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  8. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  9. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  10. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

随机推荐

  1. HDU 5073 数学题

    题目传送门 http://acm.hdu.edu.cn/showproblem.php?pid=5073 这道题RE了好多发啊囧,RE到精神不振. Galaxy的质心并不是一成不变的,随着一些星球的移 ...

  2. go语言---map

    go语言---map https://blog.csdn.net/cyk2396/article/details/78890185 一.map的用法: type PersonDB struct { I ...

  3. URAL1553 Caves and Tunnels 树链剖分 动态树

    URAL1553 维护一棵树,随时修改某个节点的权值,询问(x,y)路径上权值最大的点. 树是静态的,不过套动态树也能过,时限卡的严就得上树链剖分了. 还是那句话 splay的核心是splay(x) ...

  4. 你想知道的关于JavaScript作用域的一切

    原文: https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ JavaScript中有许多章节是关于s ...

  5. STM32: TIMER门控模式控制PWM输出长度

    搞了两天单脉冲没搞定,无意中发现,这个利用主从模式的门控方式来控制一路PWM的输出长度很有效. //TIM2 PWM输出,由TIM4来控制其输出与停止 //frequency_tim2:TIM2 PW ...

  6. Spark GraphX 属性图操作

    package Spark_GraphX import org.apache.spark.graphx._ import org.apache.spark.rdd.RDD import org.apa ...

  7. bzoj 1800: [Ahoi2009]fly 飞行棋【枚举】

    在圆里所以没有平行四边形,n^4枚举点即可 #include<iostream> #include<cstdio> using namespace std; const int ...

  8. [Swift]通天遁地Swift

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. 二分搜索poj106

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 49944   Accepted: 10493 De ...

  10. 题解报告:hdu 1010 Tempter of the Bone

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1010 Problem Description The doggie found a bone in a ...