参考网址:https://segmentfault.com/a/1190000010507616

下面栗子中,
callback是传递父组件的方法,
mutationName是传递父组件的数据,

App.vue
<search-bar class="f-fr" placeholder="请输入名字" mutationName='resetListData' :callback="callback"/>
SearchBar.vue
export default {
name: 'SearchBar',
data() {
return {
input: ''
}
},
methods: {
setName: function () {
var input = this.input;
if (input.trim() == '') {
alert("empty");
}
else {
Api.searchTest(this.input,this.success );
} },
success(responseData) {
this.callback(responseData);
},
},
props: ['placeholder', 'apiName', 'moduleName', 'mutationName','callback']
}

vue 父组件通过props向子组件传递数据/方法的方式的更多相关文章

  1. vue父组件传参给子组件

    其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...

  2. 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?

    首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...

  3. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  4. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  5. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  6. Vue 的自定义事件系统:实现子组件跟父组件通信

    父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 v-on 写在引用的子组件上, 语句 this.$emit('xxx') ,写在子组件里.

  7. vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新

    问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...

  8. Vue--子组件互相传值,子组件来回传值,传值反复横跳

    Vue--子组件传值,子组件来回传值,子组件传值反复横跳 我不不仅要子组件之间直接传值,我还要传过去再传回来,传回来再传过去,子组件直接反复横跳 解决问题 给组件传值,并不知道改值的校验结果 同一个组 ...

  9. sql实现同时向主表和子表插入数据方法

    使用sql语句实现同时向主表和子表插入数据方法: Oracle: -- oracle创建sequence create sequence SEQ_test minvalue 1 maxvalue 99 ...

随机推荐

  1. Mysql 删除重复数据只保留id最小的

    DELETE FROM 表 WHERE id NOT IN ( SELECT id FROM ( SELECT min(b.id) AS id FROM 表 b GROUP BY b.重复字段 ) b ...

  2. React native 之设置IOS的图标,名称和启动图(下篇文章会讲到RN的android的相关设置)

    1.首先,app的名称: 如图所示:我的工程名叫BOOk 在BOOk下面的info.plist的文件里设置app的相关信息:比如Bundle name就是设置APP的名称 2.App的图标:(这里注意 ...

  3. Web Api:基于RESTful标准

    参考链接:http://www.cnblogs.com/lori/p/3555737.html 简单的了解到RESTful架构后,跟着以上链接做了一个小练习. Step1: 新建WebApi项目,新建 ...

  4. Ubuntu18.04下安装MySQL

    Ubuntu上安装MySQL非常简单只需要几条命令就可以完成. 1. sudo apt-get install mysql-server 2. apt-get isntall mysql-client ...

  5. MATLAB数据类型

    数据类型 1数值类型 @整数 *浮点型转整数型的转换函数,将数值转换为最为接近的整数值,若分数部分为0.5时,转换为最接近的两个整数中绝对值较大的一个. *取整函数: floor(x)向下取整 cei ...

  6. [原][粒子特效][spark]深入浅出osgSpark

    背景: 目前我使用的spark粒子特效库是2.0 这个库好像是原来鬼火引擎的一部分,需要从github上找 现在我要将其使用到我自己开发的基于osgearth开的三维地图引擎中 步骤: 1.编译spa ...

  7. [原]关于helios自定义面板简述

    想研究一下helios和自己仿真软件的适配,于是找了一下关于helios的使用 首先关于helios的使用有一个“vr2009”的发帖者有过很详细描述: http://www.insky.cn/bbs ...

  8. 力扣(LeetCode)7.整数反转

    给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: ...

  9. DEBUG(2)--函数的输入参数要做适当的检查

      今天在调试程序时发现,在单步运行的情况下,程序执行没有问题,但是直接运行就会出问题.出问题的代码如下 for(int col=0;col<=9;++col) { int killid=Pos ...

  10. English trip M1 - AC11 I Dreamed a Dream? 我做了一个梦 Teacher:Lamb

    In this lesson you will learn to describe an experience.  这节课你讲学习到描述经历 课上内容(Lesson) 词汇(Key Word ) 句型 ...