组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。

1. 全局 Vue.component(tagName, options)



<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <!-- // <script src="vue.js"></script> -->
</head>
<body> 
    <div id="box">
        <test></test>
    </div>
    <script type="text/javascript">
        //注册
        Vue.component('test', {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的组件'}
            },
            methods:{
                change:function(){
                    //todo
                    console.log(this);
                }
            }
        });

        //创建根实例
        var vm = new Vue({
            el:'#box',
        });
    </script>
</body>
</html>



2. 局部注册



<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="vue.js"></script>
</head>
<body> 
    <div id="box">
        <test></test>
    </div>
    <script type="text/javascript">
        ///定义组件
        var testTemplate = {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'test': testTemplate
            }
        });
    </script>
</body>
</html>



3. 动态切换组件

首先这样用法， 这样指定组件，下面有两个 我们指定其中的一个



<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="vue.js"></script>
</head>
<body> 
    <div id="box">
        <components :is="testTemplate"></components>
    </div>
    <script type="text/javascript">
        ///定义组件
        var testTemplate = {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的局部组件1'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        //创建根实例  
        var vm = new Vue({
            el:'#box'
        });
    </script>
</body>
</html>



下面有两个 我们指定其中的一个



<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="vue.js"></script>
</head>
<body> 
    <div id="box">
        <input type="button" value="1" @click="a='testTemplate'">
        <input type="button" value="2" @click="a='testTemplate2'">
        <components :is="a"></components>
    </div>
    <script type="text/javascript">
        ///定义组件
        var testTemplate = {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的局部组件1'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        var testTemplate2 = {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的局部组件2'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        //创建根实例  
        var vm = new Vue({
            el:'#box',
            data:{
                a: testTemplate   //一开始让a的第一个组件
            },
            components:{        //要把组件写入到components里面，如果没有放的话在切换的时候就会找不到 组件
                'testTemplate':testTemplate,
                'testTemplate2':testTemplate2
            }
        });
    </script>
</body>
</html>