Please enable JavaScript.

Coggle requires JavaScript to display documents.

Vue Components - Basic - Coggle Diagram

- - - - Parent
        
        <friend-contact name="John" phone-number="0123 4567" email-address="example@mail.com"></friend-contact>
        
        Kebab Case
      - Child
        
        props: [ name, phoneNumber, emailAddress]
        
        Camel Case
        
        Advanced
        
        props: { isFavorite: { type: String, required: false, default: '0', validator: function(value) { return value === '0' || value === '1'; } }}
        
        Let other people to understand your code!
    - - <friend-contact v-bind:is-favorite="true">
        
        props: { isFavorite: {type: Boolean, required: false, default: false }}
  - - - "friend" is an object. This will bind ALL properties of "friend" to the component
- - - - Kebab Case
  - - - Kebab Case
  - - - Advanced
        
        emits: { 'toggle-friend': function(id) { if(!id) { return false; else { return true; } } } }
        
        For documentation purpose
  - - - Automatically fall the props and event to the button tag (the root tag) of the child component
- - - - provide: { topics: [{...}, {...}] }
        
        Advanced
        
        provide() { return { topics: this.topics } }
        
        Access to local data of the component
    - - inject: [topics]
        
        just like using props
- - - - fyi: id is a prop