2017年9月30日 星期六

[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



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





沒有留言:

張貼留言