Vue学习笔记之Vue组件

0x00 前言

vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

那接下来就跟我看一下如何在一个Vue实例中使用组件吧！

这里有一个Vue组件的示例：

    Vue.component('Vheader',{

            data:function(){

                return {

                }

            },

            template:`<div class="header">

                        <div class="w">

                            <div class="w-l">

                                <img  src="./logo.png"/>

                            </div>

                            <div class="w-r">

                                <button>登录</button><button>注册</button>

                            </div>

                        </div>

                    </div>`

        })

组件是可复用的Vue实例，并且带有一个名字：在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="app">

        <Vheader></Vheader>

</div>

var app = new Vue({

       el:'#app',

       data:{

       }

 })

效果显示：

Vue学习笔记之Vue组件

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项。

0x01 组件的复用

    <div id="app">

        <Vheader></Vheader>

        <br>

        <Vheader></Vheader>

        <br>

        <Vheader></Vheader>

    </div>

效果显示：

Vue学习笔记之Vue组件

给Vheader组件中添加一个按钮，绑定数据属性count，然后你会发现点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

在创建组件过程中第一个参数是组件的名字，第二个参数是跟new Vue实例一样的options。跟实例对象不同的是有两点：

关于组件名的起名：https://cn.vuejs.org/v2/guide/components-registration.html

1、组件中没有el，因为el仅仅的是绑定Vue的根元素。

2、data属性不再是返回对象，而是返回一个函数。而且必须返回一个函数。

ok。介绍到这里相信大家都明白了组件的创建了。

那么通常一个应用会一颗嵌套的组件

秒客网

Vue学习笔记之Vue组件

0x00 前言

0x01 组件的复用

相关文章