Vue注册全局组件,vue组件全局注册,局部注册优缺点

　　本文主要介绍vue组件注册全解析的相关信息，帮助大家更好的理解和使用Vue。感兴趣的朋友可以了解一下。

全局组件注册语法

　　组件中的两个参数：组件名称和组件内容。

　　Vue.component(组件名称，

　　数据：组件数据，

　　模板：组件模板内容

　　})

全局组件注册应用

　　组件创建：

　　Vue.component(按钮计数器，{

　　数据：函数(){

　　返回{

　　计数：0

　　}

　　},

　　模板： button @click=handle 点击了{{count}}次/button ，

　　方法：{

　　handle: function(){

　　this.count

　　}

　　}

　　})

　　var vm=new Vue({

　　埃尔： #app ，

　　数据：{

　　}

　　});

　　如何在页面中使用，直接在页面中应用组件名。

　　div id=应用程序

　　按钮计数器/按钮计数器

　　/div

　　这个组件可以重复使用。可以在页面中多次直接使用，数据相互独立，互不干扰。

组件注册注意事项

　　1 .数据必须是函数。

　　分析函数与普通对象的比较。

　　2.组件模板内容必须是单个根元素。

　　演示实际效果。

　　3.组件模板内容可以是模板字符串。

　　模板需要浏览器支持(ES6语法)

　　4.组件的命名方法

　　短水平线模式

　　Vue.component(my-component ，{/*.*/})

　　驼峰模式

　　Vue.component(MyComponent ，{/*.*/})

　　如果使用驼峰命名的组件，在使用组件时，组件在字符串模板中只能以驼峰的形式使用，而在普通标签模板中，组件必须以短横线的形式使用。

局部组件

　　本地组件只能在注册它的父组件中使用。

局部组件注册语法

　　var ComponentA={/*.*/}

　　var ComponentB={/*.*/}

　　var ComponentC={/*.*/}

　　新Vue({

　　埃尔： #app ，

　　组件：{

　　成分a:成分a，

　　组件-b :组件b，

　　组件c :组件c

　　}

　　})

　　组件的创建

　　Vue.component(test-com ，{

　　模板：“divTesthello-world/hello-world/div”

　　});

　　var HelloWorld={

　　数据：函数(){

　　返回{

　　消息：“HelloWorld”

　　}

　　},

　　模板：“div{{msg}}/div”

　　};

　　var HelloTom={

　　数据：函数(){

　　返回{

　　消息：“HelloTom”

　　}

　　},

　　模板：“div{{msg}}/div”

　　};

　　var HelloJerry={

　　数据：函数(){

　　返回{

　　消息：“HelloJerry”

　　}

　　},

　　模板：“div{{msg}}/div”

　　};

　　var vm=new Vue({

　　埃尔： #app ，

　　数据：{

　　},

　　组件：{

　　 hello-world: HelloWorld，

　　你好-汤姆：HelloTom，

　　“你好，杰瑞”:你好，杰瑞

　　}

　　});

　　页面中的应用程序

　　div id=应用程序

　　你好世界/你好世界

　　你好汤姆/你好汤姆

　　你好杰瑞/你好杰瑞

　　测试通信/测试通信

　　/div

　　以上是Vue组件注册全分析的详细内容。更多关于Vue组件注册的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。