vue 第七天组件的注册和使用

最新推荐文章于 2023-02-01 21:42:58 发布

lilianggui

最新推荐文章于 2023-02-01 21:42:58 发布

阅读量159

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/lilianggui/article/details/103059634

版权

vuejs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、全局注册

<my-button></my-button>


Vue.component('my-button', {
    template: '<button>我的按钮</button>'
});


new Vue({

}).$mount('#app');

2、局部注册

<my-button></my-button>


let myButton = {
    template: '<button>你的按钮</button>'
};
new Vue({
    components: {
        myButton
    }
}).$mount('#app');

3、组件命名有两种方式，一种是短横线连接单词的方式，如my-button，使用这种方式命名的组件必须使用这种方式的名字使用，如<my-button></my-button>，另外一种方式是PascalCase命名方式（首字母大写），使用这种方式命名的组件可以同时使用命名两种方式使用组件，如<MyButton</MyButton>和<my-button></my-button>