![](/img/trans.png)
[英]How can I pass an Object from A component to B component in Vue.js without using vuex?
[英]How can I pass object to Vue Component?
我想用數據對象調用Vue組件。
todo-item標簽有效。 todo-item2標簽什么也沒做。 我希望得到同樣的結果。
HTML:
<div id="app">
<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"></todo-item>
<todo-item2 v-bind:="todo"></todo-item2>
</div>
腳本:
var Todo = {
props: ['text', 'isComplete'],
template: '<p>{{ text }} : {{ isComplete }}</p>'
}
var Todo2 = {
props: ['todo'],
template: '<p>{{ todo.text }} : {{ todo.isComplete }}</p>'
}
new Vue({
el: '#app',
data: {
todo: {
text: 'Learn Vue',
isComplete: false
},
},
components: {
todoItem: Todo,
todoItem2: Todo2,
}
})
我認為它無法識別todo-item2中的“文本”。
安慰:
TypeError: Cannot read property 'text' of undefined
at Proxy.eval (eval at createFunction (VM218 vue.js:10518), <anonymous>:2:43)
at VueComponent.Vue._render (VM218 vue.js:4465)
at VueComponent.updateComponent (VM218 vue.js:2765)
at Watcher.get (VM218 vue.js:3113)
at new Watcher (VM218 vue.js:3102)
at mountComponent (VM218 vue.js:2772)
at VueComponent.Vue$3.$mount (VM218 vue.js:8416)
at VueComponent.Vue$3.$mount (VM218 vue.js:10777)
at init (VM218 vue.js:4059)
at createComponent (VM218 vue.js:5499)
您忘記指示v-bind
巫婆屬性是綁定了<todo-item2 v-bind:="todo"></todo-item2>
還是被<todo-item2 v-bind:todo="todo"></todo-item2>
var Todo = { props: ['text', 'isComplete'], template: '<p>{{ text }} : {{ isComplete }}</p>' } var Todo2 = { props: ['todo'], template: '<p>{{ todo.text }} : {{ todo.isComplete }}</p>' } new Vue({ el: '#app', data: { todo: { text: 'Learn Vue', isComplete: false } }, components: { todoItem: Todo, todoItem2: Todo2, } })
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <todo-item v-bind:text="todo.text" v-bind:is-complete="todo.isComplete"></todo-item> <todo-item2 v-bind:todo="todo"></todo-item2> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.