javascript - 为什么我无法从另一个组件访问 vue.js 属性？

Question

var v_root = new Vue({
    delimiters: [ '[[', ']]' ],
    el: '#vue-main',
    data: {
        jobs: [],
        report_links: '{{ report_links }}',
    },
    mounted: function() {
      console.log(this.report_links);
      <-- this logs the expected data-->>
    },


Vue.component('overview', {
    delimiters: [ '[[', ']]' ],
    props: ['jobs', 'report_links'],
    mounted: function() {
      console.log(this.report_links);
      <-- this logs 'undefined' -->
      console.log(this.jobs)
      <-- this logs jobs as expected-->>
    },

为什么我可以从我的组件访问作业，但不能从 report_links 访问作业？

不确定这是否重要，但report_links应该返回['test1', 'test2']

Answer 1

看起来你在我打字的时候就明白了这一点..它的值(value)是:

[CodePen Mirror]

var v_root = new Vue({
    el: '#vue-main',
    data: {
        jobs: ["job1","job2"],
        report_links: '{{ report_links }}',
    },
    mounted: function() {
      console.log(this.report_links);
      //<-- this logs the expected data-->>
    },
})


Vue.component('overview', {
    delimiters: [ '[[', ']]' ],
    props: ['jobs', 'report_links'],
    mounted: function() {
      console.log(this.report_links);
      //<-- this logs 'undefined' -->
      console.log(this.jobs)
      //<-- this logs jobs as expected-->>
    },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="vue-main">
  <overview 
    :jobs="jobs"
    :report_links="report_links">
  </overview>
  
  <ul>
    <li v-for="(job, index) in jobs" :key="index">
    {{ job }}
    </li>
  </ul>
  <div>
  {{ report_links }}
  </div>
</div>