Javascript 了解组件和道具
我搞不清楚如何使用组件和道具 更具体地说，我试图更新组件中的数据，并让它更改组件。我有一个组件模板遍历的对象数组。我想更改该数组，并将更改反映在组件中 以下是我的玩具示例：Javascript 了解组件和道具,javascript,vue.js,Javascript,Vue.js,我搞不清楚如何使用组件和道具 更具体地说，我试图更新组件中的数据，并让它更改组件。我有一个组件模板遍历的对象数组。我想更改该数组，并将更改反映在组件中 以下是我的玩具示例： <html> <head> <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <script src="assets/jquery-1.12.0.js"></s
<html>
<head>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="assets/jquery-1.12.0.js"></script>
</head>
<body>
<div id="app">
<input id="opp-list-input" v-model="opportunityListVals" type="hidden">
<br>
<opportunitylist v-bind:opp-list="opportunityListVals"></opportunitylist>
</div>
<script>
new Vue({
el: '#app',
data: {
opportunityListVals: [{name: 'First Opportunity'},{name: 'Second Opportunity'}]
},
components: {
opportunitylist: {
props: ['oppList'],
template: '<ul>'
+ '<li v-for="opp in oppList">'
+ '{{opp.name}}'
+ '</li>'
+ '</ul>'
}
}
});
$('#opp-list-input').val([{name: 'Third Opportunity'}]);
$("#opp-list-input").change();
</script>
</body>
</html>
新Vue({
el:“#应用程序”，
数据：{
opportunityListVals:[{name:'First Opportunity'}，{name:'Second Opportunity'}]
},
组成部分：{
机会列表：{
道具：['oppList']，
模板：“”
+“- ”
+“{{opp.name}}”
+“
”
+“
”
}
}
});
$（'opp list input'）.val（[{name:'Third Opportunity'}]）；
$（“#opp列表输入”）.change（）；
有没有更好的方法来处理这个对象数组。通过输入元素发送它似乎很奇怪，但我看到的每个示例都是这样做的。下面是组件的代码。您不需要使用v-bind，只需要使用
：oppList=“opportunityListVals”Vue.extend（）<body>
<div id="app">
<opportunitylist :oppList="opportunityListVals"></opportunitylist>
</div>
<script>
new Vue({
el: '#app',
data: {
opportunityListVals: [{name: 'First Opportunity'},{name: 'Second Opportunity'}]
},
components: {
opportunitylist: Vue.extend({
props: ['oppList'],
template: '<ul>'
+ '<li v-for="opp in oppList">'
+ '{{opp.name}}'
+ '</li>'
+ '</ul>'
})
}
});
</script>
新Vue({
el:“#应用程序”，
数据：{
opportunityListVals:[{name:'First Opportunity'}，{name:'Second Opportunity'}]
},
组成部分：{
opportunitylist:Vue.extend({
道具：['oppList']，
模板：“”
+“- ”
+“{{opp.name}}”
+“
”
+“
”
})
}
});