Question

我觉得自己正在为应该很容易的事情而苦苦挣扎，尽管我一生中都缺少一些东西。

我有一个根组件，我试图在其中传递json对象作为道具，但是当我尝试访问它从未设置的道具时。

我所拥有的是以下组件，并且该组件可以很好地安装：

const appTemplate = `
<div class="container-fluid reference-library">
        <div class="row">
            <div id="reference-library-container" class="col-md-4 col-md-border">
                <div class="panel panel-default panel-margin-override">

                </div>
            </div>
            <div class="col-md-8 col-md-border">
                <i class="fas fa-chevron-left vertical-center arrow-container"></i>
                <div class="panel panel-default panel-margin-override">
                    <div class="panel-body" id="partial">

                    </div>
                </div>
            </div>
        </div>
    </div>
`;

const app = new Vue({
    el: "#app",
    template: appTemplate,
    props: ["items"],
    data: {
        loading: false,
    },
    methods: {
        useVueForContent: function() {
            this.$data.vueForContent = true;
        }
    },
    mounted() {
        console.log(this.items); //-- always undefined
    },
});

我无法使用的是MVC视图中的以下内容：

@using Newtonsoft.Json
@using Newtonsoft.Json.Serialization

@{
    var contractResolver = new DefaultContractResolver  
    {
        NamingStrategy = new CamelCaseNamingStrategy()
    };

    var library = JsonConvert.SerializeObject(Model, new JsonSerializerSettings
    {
        ContractResolver = contractResolver
    });
}

<div id="app" :items="@library"></div>


<script src="~/js/app/components/reference-library/library.js"></script>
<script src="~/js/app/pages/reference-library.js"></script>

现在，如果我添加一个子组件并传递相同的对象，那么一切都会正常进行，但是目标是将库数据保留在根组件中，并希望子组件使用根数据，但是同样，我不能似乎在弄清楚如何将数据放入根组件。

Answer 1

根据Mattic Ustard提到的论坛主题，以下似乎是一个很好的解决方案：

<!DOCTYPE html>
<html>
  <body>
    <!-- This is regular HTML not a Vue template - you can not use "v-bind:items" -->
    <!-- so you have to stringify the value -->
    <div id="app" items="@library"></div>
  </body>
</html>

然后在main.js中输入

：

import Vue from 'vue'
import App from './App'

new Vue({
  el: 'entry-component',
  computed:
  {
    items()
    {
      return this.$el.attributes.items.value;
    }
  },
  render(h) {
    return h(App, {
      props: {
        // propagate ITEMS as a prop for App.vue
        items: this.$el.attributes.items.value
      }
    })
  }
})

在App.vue中：

export default 
{
  props: ['items']
}

无法将道具传递给root vue组件

1 个答案: