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

我忘了像这样通过report_links：

 <overview :jobs=jobs :report_links=report_links></overview>

此固定。

Answer 2

看起来像您在我能够键入它的时候就想到了这一点。.它的价值：

[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>

为什么我无法从另一个组件访问vue.js道具？

2 个答案: