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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容