vue 父组件通过props向子组件传递数据/方法的方式
参考网址: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向子组件传递数据/方法的方式的更多相关文章
- vue父组件传参给子组件
其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...
- 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- Vue 的自定义事件系统:实现子组件跟父组件通信
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 v-on 写在引用的子组件上, 语句 this.$emit('xxx') ,写在子组件里.
- vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新
问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...
- Vue--子组件互相传值,子组件来回传值,传值反复横跳
Vue--子组件传值,子组件来回传值,子组件传值反复横跳 我不不仅要子组件之间直接传值,我还要传过去再传回来,传回来再传过去,子组件直接反复横跳 解决问题 给组件传值,并不知道改值的校验结果 同一个组 ...
- sql实现同时向主表和子表插入数据方法
使用sql语句实现同时向主表和子表插入数据方法: Oracle: -- oracle创建sequence create sequence SEQ_test minvalue 1 maxvalue 99 ...
随机推荐
- uint8_t / uint16_t / uint32_t /uint64_t数据类型详解
uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型? 在nesc的代码中,你会看到很多你不认识的数据类型,比如uint8_t等.咋一看,好像是个新的数据类型 ...
- NOI2017 游记
成功在NOI2017退役……现在的我已经是一只退役狗了 结果也一直到了退役,我都还不会半平面交,不会单纯形,不会非旋转版Treap…… FWT我也不熟,分治FFT我也只写过一道板子题 但是现在已经退役 ...
- class与struct的区别
C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据类型的数据结构了,它已经获取了太多的功能: ①struct能包含成员函数吗? 能! ②struct能继承吗? 能!! ...
- 1.1 vue.js devtools使用教程
1. vue.js devtools使用教程
- HashMap源码解读
1.HashMap 1.6解读 a).put,get,遍历方式参看 http://www.cnblogs.com/skywang12345/p/3310835.html#a23 需要注意的是,1.7 ...
- 《剑指offer》第五十六题(数组中唯一只出现一次的数字)
// 面试题56(二):数组中唯一只出现一次的数字 // 题目:在一个数组中除了一个数字只出现一次之外,其他数字都出现了三次.请 // 找出那个吃出现一次的数字. #include <iostr ...
- 学习笔记11—MATLAB 界面设计
1.cmd窗口输入-guide------> 打开.fig文件 2.查看SPM源代码: 2.matlab中如何改x,y轴以及图例上字体大小 1) x,y轴 -------整个轴上面就一个设定字符 ...
- angular在组件中选择dom元素
想选择 在组件中选择自己template里的dom元素,要使用ElementRef. import { Component, EventEmitter, HostListener, OnIni ...
- dict使用
里面的元素是:key: value d = { 'Adam':95, 'Lisa':85, 'Bart':59, 'Paul':75 } 打印:print d['Paul'] 注意: 通过 key ...
- PHP加密函数
单向散列加密 单向散列加密是指通过对不同输入长度的信息进行散列计算,得到固定长度的输出.这个散列计算是单向的,即不能对固定长度的输出进行计算从而获取输入信息. 特征:雪崩效应.定长输出和不可逆 作用: ...