vue.js关于props为函数的一个疑惑,this指向的是父级

Question

codepen
点击按钮输出的是父组件的msg:hello,i am peiqi,在子组件里面this为什么会指向父级?
源码还没有了解到这里所以不太清楚
代码如下:

Vue.component('fff', {
  template:`<div><sss :ff="sf"></sss></div>`,
  data(){
    return{
      msg:'hello,i am peiqi'
    }  
  },
  methods:{
    sf(){
     console.log(this.msg)
    }
  }
})
Vue.component('sss', {
  template:`<button @click="fn">sss</button>`,
  props:{
    ff:{
      type: Function,
      required: true
    }
  },
  data(){
    return{
      msg:'你好,我是佩奇！'
    }  
  },
  methods:{
    fn(){
      this.ff()
    }
  }
  // 选项
})

补充:8.10有答案说vue对this做了特殊处理

在我的codepen里面更改一下：

Vue.component('sss', {
  template:`<div><button @click="fn">sss</button>
   <button @click="test">test</button>
</div>`,
  props:{
    ff:{
      type: Function,
      required: true
    }
  },
  data(){
    return{
      msg:'你好,我是佩奇！'
    }  
  },
  methods:{
    fn(){
      this.ff()
    },
    test(){
     var obj={msg:'我是obj'}
     this.fn.call(this)
      this.fn.call(obj)
      }
   }
  // 选项
})

确实用call也没法改变this的指向
猜想是不是可能用了bind如下:

a= {name:'z',fn:function(){
 console.log(this.name)
}}
b={name:'p'}
a.fn.call(b)
a.fn=a.fn.bind(a)
a.fn.call(b)
// p
// z

Answer 1

//准确的说是此处的this一直指向当前Vue实例，即使是通过call方法也不能改变其上下文，
//this的指向这在Vue官网文档上是有说的
sf(){
  console.log(this.msg)
}

Answer 2

可以看一下这篇博文，可能对你理解有帮助https://segmentfault.com/a/11...

Answer 3

vue组件实例化的时候会把定义时的method的函数bind this到实例上，bind之后this就定死了
所以声明method的时候一定要用function声明，不能用箭头函数

Answer 4

methods里面的函数的this已经被bind死了 不能修改了 要想给子组件赋值函数的话 你这样试试 看看行不行

Vue.component('fff', {
  template:`<div><sss :ff="sfs"></sss></div>`,
  data(){
    return{
      msg:'hello,i am peiqi',
      sfs:function(){
        console.log(this.msg)
      }
    }  
  },
  methods:{
  }
})