16-组件的创建(注：Vue的自定义事件中的变量不能用驼峰体)

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 实例，所以它们与 new Vue 接收相同的选项

全局组件

代码示例：

　　一个关于弹一弹的代码实例<!DOCTYPE html><html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="D:\VsCode_projectsfiles\vue_file\inputfiles\vue.js"></script>
</head>
<body>
    <div id = 'app'>
　　　　// 使用组件
        <tan></tan>            
    </div>

    <script>
        //定义一个全局组件
        Vue.component('tan',{
            template:`<button v-on:click='jumpOut'>弹出靓白肌肤</button>`,
            methods:{
                jumpOut:function(){
                    alert(666);
                }
            }
        })
        var vm = new Vue({
            el:"#app",
           
        })
    </script>
</body>
</html>

组件的复用

    <div id="app">
        <Vheader></Vheader>
        <br>
        <Vheader></Vheader>
        <br>
        <Vheader></Vheader>
    </div>

效果显示：

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

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

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

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

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

注册自定义组件

代码如下：

　　注册一个自定义的全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src = '../../inputfiles/vue.js'></script>
</head>
<body>
    <div id = 'app'>
        <tan></tan>
        <tan></tan>
        <tan></tan>
        <tan></tan>
        <tan></tan>
        <tan></tan>
    </div>

    <script>
        //注册一个自定义组件
        Vue.component('tan',{
            template:`<button v-on:click='jump'>弹奏鱼尾纹{{count}}</button>`,
            //这里的data必须是一个方法，每次调用一个注册好的组件时，都会触发一个data方法
            data:function(){
                return {
                    count:0
                }
            },
            methods:{
                jump:function(){
                    this.count += 1
                }
            }
        })
    
        var vm = new Vue({
            el:"#app",
            data:{},

        })
    </script>
</body>
</html>

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

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

Vue——组件的创建

16-组件的创建(注：Vue的自定义事件中的变量不能用驼峰体)

组件的复用

推荐阅读