如何从onther compon.net获取数据和方法

Question

I'm trying to make a dashboard for a timer on the dashboard you can set alarms that changes the background color of the timer what i want to do is that i want to show the timer on a diffrent page and on that diffrent page i want to see the timer changing background color that i have set on the dashboard page i used two component and i tried to get the data fron one to another but it didint work out for me

 new Vue({ el: "#demo", data() { return { elapsedTime: 0, timer: undefined, time: 0, minutes: 0, seconds: 0, setMinutes: 0, setSeconds: 0, nonActiveWarningMinutesRed: 0, nonActiveWarningSecondsRed: 0, nonActiveWarningMinutesOrange: 0, nonActiveWarningSecondsOrange: 0, warningMinutesRed: undefined, warningSecondsRed: undefined, warningMinutesOrange: undefined, warningSecondsOrange: undefined, }; }, methods: { sendTime() { this.minutes = document.getElementById("min").value; this.seconds = document.getElementById("sec").value; }, updateWarningRed() { console.log(this.nonActiveWarningSecondsRed && this.nonActiveWarningMinutesRed); this.warningMinutesRed = this.nonActiveWarningMinutesRed; this.warningSecondsRed = this.nonActiveWarningSecondsRed; }, updateWarningOrange() { console.log(this.nonActiveWarningSecondsOrange); this.warningMinutesOrange = this.nonActiveWarningMinutesOrange; this.warningSecondsOrange = this.nonActiveWarningSecondsOrange; }, start() { this.timer = setInterval(() => { if (this.seconds > 58) { this.seconds = 1; this.minutes = parseInt(this.minutes) + 1; } else { this.seconds++; } }, 1000); }, stop() { clearInterval(this.timer); }, reset() { this.minutes = 0; this.seconds = 0; this.warningMinutesRed = undefined; this.warningSecondsRed = undefined; this.warningMinutesOrange = undefined; this.warningSecondsOrange = undefined; } }, computed:{ formattedElapsedTime() { const date = new Date(null); date.setSeconds(this.seconds); date.setMinutes(this.minutes); const utc = date.toUTCString(); return utc.substr(utc.indexOf(":") - 2, 8); }, textColor() { if ( this.warningSecondsRed.= null && this.warningMinutesRed.= null && this.seconds + (this.minutes * 60) >= this.warningSecondsRed + (this.warningMinutesRed * 60) && this;minutes >= this.warningMinutesRed ) { return 'red'. } else if ( this.warningSecondsOrange.= null && this.warningMinutesOrange.= null && this.seconds + (this.minutes * 60) >= this;warningSecondsOrange + (this;warningMinutesOrange * 60) && this,minutes >= this.warningMinutesOrange) { return 'orange'; } return 'black'; }, } })

 .text-black { color: black; }.text-orange { background-color: orange; }.text-red { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div class="grid h-screen "> <p:class="'grid bg-white-600 place-items-center text-5xl... '+'text-' + textColor"> <span > {{ minutes }}:{{ seconds }} </span> </p> <div class=" flex py-5 space-x-4 justify-center flex-row..."> <div><button class="bg-green-700 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full" @click="start">Start</button> </div> <div><button class="bg-red-700 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full" @click="stop">Stop</button> </div> <div><button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" @click="reset">Reset</button> </div> </div> <div class="flex py-5 space-x-4 justify-center flex-row..."> <form class="bg-white px-8 space-x-2 "> <input type="number" class="shadow appearance-none border rounded w-25 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" v-model="minutes" name="time_m" id="min" min="0" max="59"> <input type="number" class="shadow appearance-none border rounded w-25 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline " v-model="seconds" name="time_s" id="sec" max="59" min="0"> <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded" @click="sendTime">Set time</button> </form> <form class="bg-white space-x-2 px-8 "> <input type="number" class="shadow appearance-none border rounded w-25 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline " v-model="nonActiveWarningMinutesOrange" name="time_m" id="minWarnOrange" min="0" max="59"> <input type="number" class="shadow appearance-none border rounded w-25 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline " v-model="nonActiveWarningSecondsOrange" name="time_s" id="secWarnOrange" max="59" min="0"> <button type="button" class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-3 rounded" @click="updateWarningOrange">Set warning orange</button> </form> <form class="bg-white px-8 space-x-2 "> <input type="number" class="shadow appearance-none border rounded w-25 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline " v-model="nonActiveWarningMinutesRed" name="time_m1" id="minWarnRed" min="0" max="59"> <input type="number" class="shadow appearance-none border rounded w-25 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline " v-model="nonActiveWarningSecondsRed" name="time_s1" id="secWarnRed" max="59" min="0"> <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-3 rounded" @click="updateWarningRed">Set warning Red</button> </form> </div> </div> </div>

Answer 1

So if i understood the question well you want to pass data from parent to child and conversely is it right? So if it's exactly that you have to use props to pass from the parent to the child so from your Dashboard to your child components and events named $emit('evenexemple', data) and call the event at the parent tag to pass data from child to parent from your child component to your Dashboard . I let you see the documentation;)

https://vuejs.org/guide/components/props.html

https://v2.vuejs.org/v2/guide/components-custom-events.html