您的位置:88bifa必发唯一官网 > 必发88首页 > vue 组件中的 this

vue 组件中的 this

发布时间:2019-06-10 01:26编辑:必发88首页浏览(128)

    前言

    本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

    vue 组件中的 this

    必发88首页,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 );
       }
    
      },
      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指向父组件。

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

    您可能感兴趣的文章:

    • vue父组件向子组件(props)传递数据的方法
    • 详解vue2父组件传递props异步数据到子组件的问题
    • vue2.0 子组件改变props值,并向父组件传值的方法
    • vue组件中使用props传递数据的实例详解
    • vue中子组件的methods中获取到props中的值方法

    本文由88bifa必发唯一官网发布于必发88首页,转载请注明出处:vue 组件中的 this

    关键词: 必发88首页

上一篇:边界判断逻辑可参照下图必发88首页

下一篇:没有了