Node.js開發筆記-12：vue元件小記

自定義vue的元件
1.可以是寫在其他.vue檔案中

引用方式：
<script>
  import packpackVue from './backpackView.vue';
export default {
    name: 'note',
    components: {
      packpackVue
    },
}
</script>

然後就可以直接用了：
<packpackVue :role="role" v-on:closeAction="closeMethod"></packpackVue>

2.通過註冊vue的方式來使用，
註冊又分為區域性註冊和全域性註冊

區域性註冊：
<script>
        // 1.建立一個元件構造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        new Vue({
            el: '#app',
            components: {
                // 2. 將myComponent元件註冊到Vue例項下
                'my-component' : myComponent
            }
        });
    </script>

全域性註冊：
<script>
    
        // 1.建立一個元件構造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        // 2.註冊元件，並指定元件的標籤，元件的HTML標籤為<my-component>
        Vue.component('my-component', myComponent)
        
        new Vue({
            el: '#app'
        });
        
    </script>