https://vuejs.org/v2/guide/components.html
components 間怎麼溝通呢？ 通常以parent-child 的闗係來傳值
props down, events up.
var app = new Vue({
el: '#app',
data: {
currentView: 'initView',
item: {}
},
methods: {
updateItem: function(obj) {
this.item = obj;
console.log(this.item);
}
}
})
parent裡有一個item的obj 利用props 傳到child component
Vue.component('initView', {
props: ['item'],
template: '#initView',
data: function() {
return {
url: /*[[${url}]]*/
}
},
methods: {
getData: function() {
console.log(this.url);
let vm = this;
this.$http.get(this.url).then((response) => {
// success callback
console.log(response.data.obj);
let obj = response.data.obj;
vm.$emit('get-data', obj);
}, (response) => {
// error callback
});
}
}
});
child component 在跟api 取得值後利用emit 傳回parent 更新item
由getData 傳到parent的updateItem
<component :is="currentView" :item="item" v-on:get-data="updateItem"> </component>
getData 在HTML裡必須寫成get-data 詳見以下
https://vuejs.org/v2/guide/components.html
HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:
或是改用 string templates
<body>
<div class="container" id="app">
<component :is="currentView" :item="item" v-on:get-data="updateItem">
</component>
</div>
<template id="initView">
<div>
<p>
{{item}}
</p>
<div class="btn-group">
<button type="button" class="btn btn-success" @click="getData">讀取API</button>
</div>
</div>
</template>
<script th:inline="javascript">
Vue.prototype.$http = axios;
Vue.component('initView', {
props: ['item'],
template: '#initView',
data: function() {
return {
url: /*[[${url}]]*/
}
},
methods: {
getData: function() {
console.log(this.url);
let vm=this;
this.$http.get(this.url).then((response) => {
// success callback
console.log(response.data.obj);
let obj = response.data.obj;
vm.$emit('get-data', obj);
// this.showModal = true;
}, (response) => {
// error callback
});
}
}
});
var app = new Vue({
el: '#app',
data: {
currentView: 'initView',
item: {}
},
methods: {
updateItem: function(obj) {
this.item = obj;
console.log(this.item);
}
}
})
</script>
</body>