vue component local registration

20180104

by Syuan Shih

HTML

<div id="app">
    <local-component></local-component>
</div>

JavaScript

// declare a new variable and put options what this component needs
var local_component = {
    template: '<div><p>{{ message }}</p><button @click="notice">點我</button></div>',
    data: function() {
        return {
            message: '這是局部註冊的元件'
        }
    },
    methods: {
        notice: function() {
            alert('Local Component!');
        }
    }
}

var vm = new Vue ({
    el: '#app',
    components: {
        'local-component': local_component
    }
})