[Vue] Components - registration

  Vue.js    Components     Registration

▌Introduction

---

A global component can be used anywhere in an application or other components.

While a local component can only be used on components where it is registered.

Related articles

1.  [Vue] Components: registration

2.  [Vue] Components: single file

▌Environment

---

▋vue 2.4.2

▌Implement

---

▋Global registration

▋HTML

<div id="app">     <h3>Songs</h3>     <index-comp operas="operas"></index-comp> </div>

▋JS

Vue.component('index-comp', {     props: ['operas'],     template: `<div>         <table class="table">            <tbody>             <tr>                 <th>Title</th>                 <th>Year</th>                 <th>Composer</th>             </tr>             <tr v-for="opera in operas">                 <input type="hidden" value="{{ opera.Id }}" />                 <td>{{ opera.Title }}</td>                 <td>{{ opera.Year }}</td>                 <td>{{ opera.Composer }}</td>               </tr>            </tbody>         </table>     </div>` }); var app = new Vue({     el: '#app',     data: {         operas: []     },     methods: {         getOperas: function () {             return axios.get('http://lcalhost:36321/api/RestApi/Get');         }     },     mounted: function () {         var vm = this;         vm.getOperas().then(response => {             vm.operas = response.data;         });     } })

Result:

▋Local registration

▋HTML

<div id="app">     <h3>Songs(app)</h3>     <index-comp :operas="operas"></index-comp> </div> <div id="app2">     <h3>Songs(app2)</h3>     <index-comp :operas="operas"></index-comp> </div>

▋JS

var List =  {     props: ['operas'],     template: "…" }; var app = new Vue({     el: '#app',     components: {         'index-comp': List     },     data: {         operas: [{Id: 1, Title: "歌劇魅影", Year: "1971", Composer:"Stan" }]     } }) var app2 = new Vue({     el: '#app2',     //components: {     //    'index-comp': List     //},    data: {     operas: [{Id: 1, Title: "歌劇魅影", Year: "1971", Composer:"Stan" }]     } })

The codes will result in NOT showing the index component on app2.

▋Dom template parsing caveats

Vue retrieve the template (html) after the browser has parsed it.
For example,

<div id="app">     <div>         <table class="table">             <index-comp operas="operas"></index-comp>         </table>     </div> </div> <script>   Vue.component('index-comp', {     props: ['operas'],     template: `            <tbody>             <tr>                 <th>Title</th>                 <th>Year</th>                 <th>Composer</th>             </tr>             <tr v-for="opera in operas">                 <input type="hidden" value="{{ opera.Id }}" />                 <td>{{ opera.Title }}</td>                 <td>{{ opera.Year }}</td>                 <td>{{ opera.Composer }}</td>               </tr>            </tbody>     ` }); </script>

It will cause restriction for css rendering on the entire <table>.

(The class="table" didn’ works! )

We have to use the special attribute, is, on the parent’s html.

<div id="app">     <h3>Songs</h3>     <div>         <table class="table">             <tbody is="index-comp" :operas="operas"></tbody>         </table>     </div> </div>

And we will get the correct rendered html.

▌Reference

---

▋Vue.js document

▋Global & Local Components (Bo Andersen)