无法将道具传递给 root vue 组件
[英] unable to pass props to root vue component
本文介绍了无法将道具传递给 root vue 组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我觉得我正在为一些应该很容易的事情而苦苦挣扎，尽管在我的一生中我错过了一些东西.
我有一个根组件，我试图在其中将 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 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">
`;const app = new Vue({el: "#app",模板:appTemplate，道具:[物品"]，数据: {加载:假，},方法: {useVueForContent: function() {this.$data.vueForContent = true;}},安装(){控制台日志(this.items)；//- 始终未定义},});
我无法在 MVC 视图中执行以下操作:
@using Newtonsoft.Json@using Newtonsoft.Json.Serialization@{var contractResolver = new DefaultContractResolver{NamingStrategy = new CamelCaseNamingStrategy()};var library = JsonConvert.SerializeObject(Model, new JsonSerializerSettings{合同解析器 = 合同解析器});}<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>
现在，如果我添加一个子组件并传递相同的对象，一切都会正常工作，但目标是将库数据保留在根组件中并让子组件使用根数据，但我又不能似乎弄清楚如何将数据放入根组件中.
解决方案
根据 Mattic Ustard 提到的论坛帖子，以下似乎是一个不错的解决方案:
<身体><!-- 这是常规 HTML 而非 Vue 模板-您不能使用v-bind:items"--><!-- 所以你必须对值进行字符串化 --><div id="app" items="@library"></div></html>
然后在 main.js 中:
从'vue'导入Vue从'./App'导入应用程序新的 Vue({el: '入口组件',计算:{项目(){返回 this.$el.attributes.items.value;}},渲染(h){返回 h(App, {道具: {//将项目作为 App.vue 的道具传播项目:this.$el.attributes.items.value}})}})
在 App.vue 中:
导出默认值{道具:['物品']}
I feel like I'm struggling with something that should be very easy, though for the life of me I'm missing something.
I have a root component where I'm trying to pass in a json object as a prop however when I try to access the prop its never set.
What I have is the following component and the component mounts fine:
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
},
});
what I can't get working is the following in an MVC View:
@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>
Now if I were add a child component and pass the same object everything would work fine, but the goal is to keep the library data in the root component and hove the child components use the root data, but again I can't seem to figure out how to get the data into the root component.
解决方案
According to the forum thread mentioned by Mattic Ustard, the following seems like a good solution:
<!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>
Then in 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
}
})
}
})
And in App.vue:
export default
{
props: ['items']
}
这篇关于无法将道具传递给 root vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
