在 vue 中, 可以使用 props 向子组件传递数据, 下面这篇文章主要给大家介绍了关于 vue 父组件通过 props 如何向子组件传递方法的相关资料, 文中通过示例代码介绍的非常详细, 需要的朋友可以参考借鉴, 下面来一起看看吧.
vue 组件中的 this
vue 中 data/computed/methods 中 this 的上下文是 vue 实例, 需注意.
例如:
注意: 不应该对 data 属性使用箭头函数 (例如 data: () => { return { a: this.myProp }} ) . 理由是箭头函数绑定了父级作用域的上下文, 所以 this 将不会按照期望指向 Vue 实例, this.myProp 将是 undefined
父组件通过 props 向子组件传递方法
父组件调用子组件, 通过绑定 callback 属性, 将方法传给子组件:
App.vue
- <search-bar class="f-fr" placeholder="输入名字" mutationName='resetListData'
- :callback="callback" />
子组件通过 props 获取父组件传过来的 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 );
- }// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- },// 面向 1-3 年前端人员
- success(responseData) {// 帮助突破技术瓶颈, 提升思维能力
- this.callback(responseData);
- },
- },
- props: ['placeholder', 'apiName', 'moduleName', 'mutationName','callback']
- }
通过 data
- export default {
- ...
- data:function() {
- return {
- callback:function(responseData) {
- this.$store.commit('resetListData', responseData);
- }
- }
- },
- ...
- };
此处 callback 以函数对象的方式, 传入子组件, 子组件调用的时候, this 指向子组件
通过 methods
- export default {
- ...
- methods: {
- callback(responseData) {
- this.$store.commit('resetListData', responseData);
- }
- }
- };
此处 callback 是父组件的一个方法, 个人理解, 当父组件初始化时, 该方法的 this 上下文就绑定了父组件的实例, 因此当子组件调用 callback 方法时, this 指向父组件.
来源: http://www.qdfuns.com/article/51117/ef4fb524a1d3cdef1936cbb61d884fb0.html