Vue.js 2 Components Fundamentals
🚧 PLEASE NOTE: An updated version of this course is available! see the Vue.js 3 Components Fundamentals With the Options API course. This course is outdated!

Global vs Local Components

Vue.js allows us to register components both globally and locally. In this lesson, we'll learn the difference between the two types and how it can affect the build size and performance of your application.

Important Note

Since Vue.js 3 became the default you must now specify version 2 when getting Vue from a CDN.

<script src="https://unpkg.com/vue@2"></script>
LESSON TRANSCRIPT

Υπάρχουν δύο τρόποι για να εγγραφεί ένα κομπονέτο, κοινωνικά και λογικά. Component method. Αυτό είναι το οποίο ονομάζουμε Global Registration και κάνει τα κομπονέτες κοινωνικά ειδητοποιημένα σε μιας εργασίας μας. Global Registration συχνά δεν είναι ιδιαίτητα.

Για παράδειγμα, αν χρησιμοποιείτε ένα σύστημα σαν Webpack, εγγραφεί κοινωνικά όλα τα κομπονέτες σημαίνει ότι ακόμα και αν σταματήσεις να χρησιμοποιείτε ένα κομ Αυτό ευκαιρίζει αυτοί οι χρησιμοποιήσεις που πρέπει να χρησιμοποιήσουν το JavaScript. Επιπλέον, για κάποιες κομπονίτες, δεν γίνει σημαντικό να τα έχουμε γραφεύσεις κοινωνικά. Για παράδειγμα, δεν θα χρησιμοποιήσουμε το PlannedComponent χωρίς το PlannedPicker. Στις περίπτωσες όπως αυτά, μπορούμε να δημιουργήσουμε το κομπονίτες ως ένα JavaScript Object και να το χρησιμοποιήσουμε όπου χρειάζεται να το χρησιμοποιήσουμε.

Ας το κάνουμε. Ας δημιουργήσουμε αυτό το κομπονίτες. Τώρα, μέσα στο PlannedPicker, θα χρησιμοποιήσουμε την εξοπλισμή των κομπονιών για να δημιουργήσουμε τον σχέδιο. Ο κομπονιών είναι ένα σχέδιο, όπου οι κλείσεις είναι τα σχέδια των κομπονιών και το βαλύ είναι το σχέδιο των εξοπλισμών.

Τώρα ότι ο κομπονιός μας είναι δημιουργήσει τον σχέδιο μέσα στο PlanPicker, δεν μπορούμε να το χρησιμοποιήσουμε πάνω από την εξοπλισμή του PlanPicker. Ας δούμε τι συμβαίνει εάν προσπαθούμε να το κάνουμε. Στην μπροζόρια δεν βλέπουμε τον σημείο σχέδιο και στην κομπονι Okay, let's remove that. We could also register the plant picker component locally, since most likely we don't need to use it in every page of our website.

To register it locally, we will set its option object to a variable and define it in the component's option of its parent. Since this component doesn't have a parent, we will define it in our root instance. If you prefer to use the hyphen syntax in the component's name, you can wrap it in quotes. Let's give it a refresh to ensure that we didn't break anything.

Και έκαναμε κάτι σημαντικό. PlanPicker δεν είναι σημαντικό. Ναι, αυτό πρέπει να είναι PlanPickerComponent. Ας προσπαθήσουμε πάλι.

Ναι, και τώρα βρίσκεται. Για να αποφασίσουμε, προσπαθήστε να δημιουργήσετε μόνο σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαν Υπάρχουν δύο τρόποι για να εγγραφεί ένα κομπονέτο, κοινωνικά και λογικά. Component method. Αυτό είναι το οποίο ονομάζουμε Global Registration και κάνει τα κομπονέτες κοινωνικά ειδητοποιημένα σε μιας εργασίας μας.

Global Registration συχνά δεν είναι ιδιαίτητα. Για παράδειγμα, αν χρησιμοποιείτε ένα σύστημα σαν Webpack, εγγραφεί κοινωνικά όλα τα κομπονέτες σημαίνει ότι ακόμα και αν σταματήσεις να χρησιμοποιείτε ένα κομ Αυτό ευκαιρίζει αυτοί οι χρησιμοποιήσεις που πρέπει να χρησιμοποιήσουν το JavaScript. Επιπλέον, για κάποιες κομπονίτες, δεν γίνει σημαντικό να τα έχουμε γραφεύσεις κοινωνικά. Για παράδειγμα, δεν θα χρησιμοποιήσουμε το PlannedComponent χωρίς το PlannedPicker.

Στις περίπτωσες όπως αυτά, μπορούμε να δημιουργήσουμε το κομπονίτες ως ένα JavaScript Object και να το χρησιμοποιήσουμε όπου χρειάζεται να το χρησιμοποιήσουμε. Ας το κάνουμε. Ας δημιουργήσουμε αυτό το κομπονίτες. Τώρα, μέσα στο PlannedPicker, θα χρησιμοποιήσουμε την εξοπλισμή των κομπονιών για να δημιουργήσουμε τον σχέδιο.

Ο κομπονιών είναι ένα σχέδιο, όπου οι κλείσεις είναι τα σχέδια των κομπονιών και το βαλύ είναι το σχέδιο των εξοπλισμών. Τώρα ότι ο κομπονιός μας είναι δημιουργήσει τον σχέδιο μέσα στο PlanPicker, δεν μπορούμε να το χρησιμοποιήσουμε πάνω από την εξοπλισμή του PlanPicker. Ας δούμε τι συμβαίνει εάν προσπαθούμε να το κάνουμε. Στην μπροζόρια δεν βλέπουμε τον σημείο σχέδιο και στην κομπονι Okay, let's remove that.

We could also register the plant picker component locally, since most likely we don't need to use it in every page of our website. To register it locally, we will set its option object to a variable and define it in the component's option of its parent. Since this component doesn't have a parent, we will define it in our root instance. If you prefer to use the hyphen syntax in the component's name, you can wrap it in quotes.

Let's give it a refresh to ensure that we didn't break anything. Και έκαναμε κάτι σημαντικό. PlanPicker δεν είναι σημαντικό. Ναι, αυτό πρέπει να είναι PlanPickerComponent.

Ας προσπαθήσουμε πάλι. Ναι, και τώρα βρίσκεται. Για να αποφασίσουμε, προσπαθήστε να δημιουργήσετε μόνο σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαντικά σημαν

This transcript is generated automatically from the lesson video. Spotted an inaccuracy? Let us know at team@vueschool.io.