文章/答案/技术大牛

发布

社区首页 >问答首页 >无法将属性传递到根vue组件

问无法将属性传递到根vue组件
EN

Stack Overflow用户

提问于 2019-08-06 05:45:04

回答 1查看 48关注 0票数 0

我觉得我正在与一些本应非常容易的事情作斗争，尽管对于我的生活来说，我错过了一些东西。

我有一个根组件，我试图将一个json对象作为prop传入，但是当我试图访问prop时，它从未设置过。

我所拥有的是以下组件，并且该组件安装正常：

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>

现在，如果我添加子组件并传递相同的对象，一切都会正常工作，但目标是将库数据保留在根组件中，并让子组件使用根数据，但我似乎又找不到如何将数据放入根组件中。

vue.js

vuejs2

回答 1

Stack Overflow用户

发布于 2019-08-06 14:41:30

根据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']
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57366445

复制

相似问题

问无法将属性传递到根vue组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将属性传递到根vue组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将属性传递到根vue组件
EN