堆栈内存溢出
  简体   繁体   English

使用Vue在生命周期中传递不同的组件

[英]Passing different components with life cycle using vue

 原文  2017-10-22 00:08:43  0   1    javascript/ vue.js/ vuejs2/ lifecycle

问题描述

Having trouble with my life cycle method using vue. 使用vue的生命周期方法遇到麻烦。 It seems that my coffeefinished variable isn't showing up. 看来我的Coffeefinished变量没有显示。 I don't know if I'm actually passing the right variables to make it show. 我不知道我是否真的在传递正确的变量来显示它。 Also when I click on the other buttons I get undefined for some strange reason, but only when i click mutliple times on the three buttons 同样，当我单击其他按钮时，由于某些奇怪的原因，我也无法定义，但仅当我在三个按钮上单击了多个时间时 

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 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>

1 个解决方案

解决方案1
 0  2017-10-25 02:59:41

I'm not sure about what you want to show. 我不确定您要显示什么。

But i make an code pen demo to try to solve your problem. 但是我制作了一个代码笔演示来尝试解决您的问题。 

    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>
                    <div v-if="message">{{ message }}</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';
            coffeeFinished.$emit('brewingcomplete', false)
            }, 10000); // 10 seconds

        },
    }

}); // end of machine-component

new Vue ({
    el:"#app",
    data:function () {
        return {
            showing: true
        }
    },
});

Your can check it out.hope can help :) 您可以检查出来。希望可以帮助:)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用 fetch 和生命周期组件的 react web 示例代码在哪里 - Where is react web example code using fetch and life cycle components 循环内的Vue组件 - Vue components inside cycle vueJS生命周期与canvas，切换组件 - vueJS life cycle with canvas, switching components 如果不使用 created() 生命周期钩子或展开运算符 (...)，则 vue.js 中的空白屏幕 - Blank screen in vue.js if not using created() life cycle hook or spread out operator (...) vue js 安装的生命周期挂钩内的 getElementById 导致 null - getElementById inside the vue js mounted life cycle hooks results in null 每个 vue.js 生命周期挂钩的用例是什么？ - What is the use case for each vue.js life cycle hooks? V-斗篷的Vue.js生命周期挂钩 - Vue.js life-cycle hook for v-cloak 在 vue 组件之间传递数据 - Passing Data between vue components 在Vue的全球组件中传递道具 - Passing Props in Global Components in Vue Vue 2 - 在组件中使用组件 - Vue 2 - using components inside components
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM