博客

话说回头来看，前面写的太不清楚了，我一直在vue的执行顺序上去寻求解决之道，是走错了路，也不记得之前别的部分的代码是怎样的了。

———————–我是一道门，门外是柳暗花明————————————————–


隔了好长时间来解决这个问题，我调整了文章顺序，因为回忆部分不重要了…

来贴一下我今天的代码：

export default {
    name: "blankFill",
    mounted: function () {
      **this.getEditor();**
    },
    data() {
      return {
        editor:'',
        answerItems: [{}],
        test：‘’，
      }
    },
    watch:{
    },
    props:{
      index:{
        type: Number,
        required:true
      }
    },
    components: {
      answerGroup,
    },
    methods: {
      AddAnswer: function () {
        this.answerItems.push({'': ''});
      },
      getEditor:function () {
        //var Editor = window.wangEditor
        //var E = window.wangEditor;
        this.editor = new E('#toolbar', '#editor');

        // 或者 var editor = new E( document.getElementById('editor') )
        this.editor.customConfig.onchange =function (text){
        this.test=text;
          // html 即编辑器中的内容
          this.$emit('GetcurrentC',text)
        }
        this.editor.create()
      }
    }

  }
</script>

执行结果报错，找不到test：



其实跟我当日的问题一样，就是在mounted中调用时，找不到data中的数据。


解决方案

<script>
  import E from 'wangeditor'
  import answerGroup from './answerGroup'

  export default {
    name: "blankFill",
    mounted: function () {
      this.getEditor();
    },
    data() {
      return {
        editor:'',
        answerItems: [{}],
        test:''
      }
    },
    watch:{
    },
    props:{
      index:{
        type: Number,
        required:true
      }
    },
    components: {
      answerGroup,
    },
    methods: {
      AddAnswer: function () {
        this.answerItems.push({'': ''});
      },
      getEditor:function () {
        //var Editor = window.wangEditor
        //var E = window.wangEditor;
        this.editor = new E('#toolbar', '#editor');

        // 或者 var editor = new E( document.getElementById('editor') )
        this.editor.customConfig.onchange =(text)=>{
          // html 即编辑器中的内容
          this.test=text;
          this.$emit('GetcurrentC',text)
        }
        this.editor.create()
      }
    }

  }
</script>

其实是将其中的匿名函数改为=>箭头函数


原因是：


1.使用匿名函数后，就使用了闭包，其作用范围就相当于其调用（父）的函数，这样的话，如果使用this，this指向的是window对象；因此，取不到data中的数据是很正常的。

2.现在说=>为什么与众不同呢？因为它可以改变this的指向，用了它，this将指向定义时的上下文，也就是VueComponent。


下面来附上相关的资料，都是各个大牛的链接：

了解闭包，很清晰：

https://www.cnblogs.com/duanlianjiang/p/5036671.html


深入了解闭包：

https://www.cnblogs.com/ruixiazhixia/p/6024758.html

————————————–我是一道门，门外是回忆—————————————–

代码：其中定义data：pageSize，我试图在不同阶段取到这个值。



1.mounted、created时调用外部函数，外部函数f（）调用data时报错，但我的外部函数f（）确实执行了，你可以看到我打印出了js function load。





2.但在window.onload,document ready时调用不报错。



猜测vue的data可能是在mounted之后才实例化的，答案是错的，因为我在created和mounted时都可以取到data中的值pageSize：2 ，说明data一定是在created之前实例化了！！但是我的外部


但如果我这个函数不在mounted或者created中调用，我的外部函数f（）并不会报错。

未完待续。。。。