vue 父组件通过props向子组件传递方法的方式

forrest23 发布于2019-08-20 18:32 / 3014人阅读

摘要：父组件通过向子组件传递方法的方式组件中的中中的上下文是实例需注意。例如注意，不应该对属性使用箭头函数例如。

vue 父组件通过props向子组件传递方法的方式 vue 组件中的 this

vue 中 data/computed/methods 中 this的上下文是vue实例,需注意。例如：

注意，不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }})。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.myProp 将是 undefined
https://cn.vuejs.org/v2/api/#...

父组件通过props向子组件传递方法

父组件调用子组件，通过绑定callback属性，将方法传给子组件：

App.vue

子组件通过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 );
            }

        },
        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指向父组件。

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84648.html

Vue 单文件中的数据传递

摘要：两个同级组件之间传递数据，通过传递数据。准备工作，我新建了个文件，分别是实例根组件，包含和组件的父组件，的同级组件父组件向子组件传递数据，通过传递数据。 Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两...

darry 2019-08-20 15:16 评论0 收藏0
聊聊Vue.js组件间通信的几种姿势

摘要：子组件向父组件通信方法一使用事件父组件向子组件传递事件方法，子组件通过触发事件，回调给父组件。非父子组件兄弟组件之间的数据传递非父子组件通信，官方推荐使用一个实例作为中央事件总线。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 评论0 收藏0
vue组件通信全面总结

摘要：当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过传入内部组件在创建高级别的组件时非常有用。写在前面组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟...

余学文 2019-08-23 12:16 评论0 收藏0
详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
vue组件间通信六种方式（完整版）

摘要：本文总结了组件间通信的几种方式，如和，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。状态改变提交操作方法。前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：showImg(https://segmentfault.com/img/remote/146000001...

frontoldman 2019-08-26 13:48 评论0 收藏0