0
使用vue對我的生命週期方法有困難。看來我的咖啡已完成的變量沒有顯示出來。我不知道我是否真的傳遞了正確的變量來顯示它。此外，當我點擊其他按鈕我得到了一個未定義一些奇怪的原因，但只有當我點擊三個按鈕複式倍使用vue傳遞具有生命週期的不同組件
const DrinkName = new Vue({});
const coffeeFinished = new Vue({});
Vue.component("customer-component",{
template: `
<div>
<button v-on:click="choose('drip brew')">Drip brew</button>
<button v-on:click="choose('frenchpress')">French Press</button>
<button v-on:click="choose('aeropress')">Aeropress</button>
</div>
`,
props: ['order_type'],
data: function() {
return{
order_type:"",
order_value: "",
drink: "",
showButtons: true,
orderAgain: false,
}
},
methods:{
choose(val) {
this.order_type = val;
if (val == "drip brew") {
this.order_value = "$5.10";
}
if (val == "frenchpress") {
this.order_value = "$8.75";
}
if (val == "aeropress") {
this.order_value = "$7.00";
}
DrinkName.$emit('customerOrdered', this.order_type, this.order_value)
}
}
}); // end of customer-component
Vue.component("barista-component",{
props: ['order_type','order_value'],
template:`
<div>
<transition name="fade">
<div order_type="order_type" order_value="order_value" v-if="order_type">
One {{order_type}}, that will be {{order_value}}.
</div>
</transition name="fade">
<transition>
<div v-if="drink">{{ drink }}</div>
</transition>
</div>
`,
data:function() {
return {
order_type: "",
order_value: "",
drink: "",
message:""
}
},
// Start of lifecycles
created() {
DrinkName.$on('customerOrdered', (myDrink,myPrice) => {
this.order_type = myDrink;
this.order_value = myPrice;
});
},
beforeUpdate: function() {
this.brewingDrink(this.order_type);
},
updated: function() {
this.drink = "";
},
methods: {
brewingDrink(val) {
setTimeout(() => {
this.drink = 'waiting for ' + val;
}, 1000);
coffeeFinished.$on('brewingcomplete', (mymessage,myDrink) =>{
this.order_type = myDrink;
this.message = 'here is your ' + this.order_value + ' , enjoy'
})
}
},
}); // end of barista-component
// start of the machine component
Vue.component("machine-component", {
props: ['order_type', 'order_value'],
template: `
<div>
<transition name="fade2">
<div order_type="order_type" v-if="order_type">
{{message}}
</transition name="fade">
</div>
</div>
`,
data: function() {
return {
order_type: "",
order_value: "",
drink: "",
message: ""
}
},
created: function() {
DrinkName.$on('customerOrdered', (myDrink) => {
this.order_type = myDrink;
this.message = 'Currently brewing ' + this.order_type;
this.brewingComplete(this.order_type);
});
},
methods: {
brewingComplete(val) {
setTimeout(() => {
this.message = val + ' is done';
}, 2500); // 10 seconds
coffeeFinished.$emit('brewingcomplete', false)
},
}
}); // end of machine-component
new Vue ({
el:"#app",
data:function() {
return {
showing: true
}
},
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cafe</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<!--user facing component -->
<div id="app">
<h1>How may I help you today </h1>
<div id="customer">
<customer-component>
</customer-component>
</div>
<div id="barista">
<barista-component>
</barista-component>
</div>
<machine-component>
</machine-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="JS/app.js"></script>
</body>
</html>