使用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: 0list: []}},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了!
转载于:https://www.cnblogs.com/flicat/p/8135875.html
使用vuex实现父组件调用子组件方法相关推荐
- vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件 父组件与子组件 子组件与父组件 它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...
- Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
- Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- 【VUE实战问题记录】Vue 父组件调用子组件的使用方法
Vue前端项目父组件调用子组件的时候,调用方式如下: 父组件 <template><div><child ref="refChild">< ...
- vue中组件之间调用方法——子组件调用父组件的方法 父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
- vue3 setup语法糖下父组件调用子组件的方法
vue3下,父组件调用子组件的方法,如果使用了<script setup> 这种写法,那么子组件方法需要采用defineExpose()进行修饰,才能被外界调用.上代码: 1.子组件 _p ...
- react 父组件调用子组件方法--通过 props 实现
父组件中 // 引入子组件 import GlobalTable from '../globalComponents/global-table'export default class Assuran ...
- react类组件中父组件调用子组件函数
1.自定义事件 子组件在 componentDidMount 生命周期里调用父组件的方法将 this 传给父组件 Son import React, { Component } from 'react ...
- vue3父组件调用子组件的方法
东风vue3父组件调用子组件的方法是通过expose和ref来实现的,我们可以通过expose来控制父组件可以访问子组件那些的方法和对象,我们将通过setup api(组合式 api)和option ...
最新文章
- C语言易错图形题--打印n行n列的空心正方形图案
- qpushbutton 设置字体大小_怎样设置Qpushbutton 的大小
- java学习笔记2022.1.12
- 目前最常用的计算机机箱类型为_绍兴承接离心风机箱高品质
- Gemstones(牛客第八场多校)
- 拥有开源安全背景的开发员当选白宫技术总监
- html5学习笔记(progress)
- 编程规范基础学习笔记
- Python爬虫-爬取科比职业生涯高清图集
- window下内网远程控制工具
- 戴尔linux恢复镜像,如何从官网下载并使用系统恢复映像
- pcm设备的注册流程
- 奥克兰大学计算机专业好找工作吗,留学选择奥克兰大学的计算机专业肯定不会后悔...
- 债券价格和到期收益率的关系_什么是到期收益率 到期收益率与债券价格的关系...
- java holder详解_connection holder is null 异常详解
- 在函数fnl()中定义一个静态变量n,fnl()中对n的值加1,在主函数中,调用fnl()10次,显示n的值,c++
- 面试官最爱问的Redis(三)Redis的基本知识
- MATLAB数字图像处理系统——边缘检测
- 【08月01日】A股滚动市净率PB历史新低排名
- 计算机论文分类号 tp,论文编码(原论文分类号):TP39.doc