Vue-组件

定义组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；

• 模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一；
• 组件化：是从UI界面的角度划分的，前端的组件化，方便UI组件的重用；

定义组件的三种方法

1.使用 Vue.extend配合 Vue.component 方法：

var login=Vue.extend({
    template:'<h1>登录</h1>'
})；
Vue.component('login',login);

注：如果使用Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 连接 ；如果不使用驼峰，则直接拿名称来使用即可

2.直接使用 Vue.component 方法：

Vue.component('register',{
    template:'<h1>欢迎注册</h1>'
});

3.将模板字符串，定义到template 标签中：

<template id="tmp1" type="x-template">
   <div>
      <a href="#">登录</a>
      <a href="#">注册</a>
   </div>
</template>

同时，需要使用 Vue.component 来定义组件：

Vue.component('account',{
    tempalte:'#temp1'
})

注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

组件中的data

1.组件中可以有自己的data数据

2.组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法

3.组件中的data除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行；

4.组件中的data数据，使用方式和实例中的data使用方式完全一样

  Vue.component('mycom', {
            template: '#temp',
            data: function() { //组件中的data必须是一个function，同时data必须返回一个object值
                return {
                    msg: '这是组件中的私有数据'
                }
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })

组件切换和切换动画

1.通过 v-if 和 v-else 实现组件切换

 <div id="app">
        <a href="" @click.prevent="flag=true">登录</a>
        <a href="" @click.prevent="flag=false">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>

    <script>
        Vue.component('login', {
            template: '<h3>登录组件</h3>'
        });
        Vue.component('register', {
            template: '<h3>注册组件</h3>'
        });
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {}
        })
    </script>

2.通过 Vue 提供的 component，来展示对应名称的组件

 <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <!-- component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称 -->
        <component :is="comName"></component>
    </div>

    <script>
        //组件名称是一个字符串
        Vue.component('login', {
            template: '<h3>登录组件</h3>'
        });
        Vue.component('register', {
            template: '<h3>注册组件</h3>'
        });
        var vm = new Vue({
            el: '#app',
            data: {
                comName: 'login' //当前 component 中的 :is 绑定的组件的名称
            },
            methods: {}
        })
    </script>

总结：当前学习了几个 Vue 提供的标签：component template transition transitionGroup

3.通过 mode 属性，设置组件切换是的模式

 <style>   /*css样式*/
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }
    </style>

 <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>
    </div>

    <script>
        Vue.component('login', {
            template: '<h3>登录组件</h3>'
        });
        Vue.component('register', {
            template: '<h3>注册组件</h3>'
        });
        var vm = new Vue({
            el: '#app',
            data: {
                comName: 'login'
            },
            methods: {}
        })
    </script>

父组件向子组件传值和方法

1.父组件向子组件传值

父组件，可以在引用子组件的时候，通过属性绑定(v-bind:)的形式，把需要传递给子组件的数据以属性绑定的形式，传递到子组件内部，供子组件使用，父组件传递过来的属性值，需要放在props数组中。在子组件中，默认是无法访问到父组件中的data上的数据和methods中的方法。

 <div id="app">
        <com1 v-bind:parentmsg="msg"></com1>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '123 啊-父组件中的数据'
            },
            methods: {},
            components: {
                com1: {
                    data() { 
                        return {
                            title: '123',
                            content: 'qqq'
                        }
                    },
                    template: '<h1>这是子组件----{{parentmsg}}</h1>',
                    props: ['parentmsg'], 
                    directives: {},
                    filters: {},
                    components: {},
                    methods: {

                    }
                }
            }
        })
    </script>

注意：子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过AJAX，请求回来的数据，都可以放到data身上；data上的数据，都是可读可写的；组件中的props中的数据，都是通过父组件传递给子组件的，是可读不可写的，无法重新赋值。

2.父组件向子组件传递方法

父组件向子组件传递方法，使用的是事件绑定机制 v-on;当我们自定义了一个事件属性之后，那么，子组件就能够，通过某些方式，来调用传递进去的这个方法了。

<div id="app">
        <com2 @func="show"></com2>
    </div>
    <template id="tmp1">
            <div>
                <h1>这是子组件</h1>
                <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
            </div>
        </template>
    <script>
        //定义了一个字面量类型的 组件模板对象
        var com2 = {
            template: '#tmp1', //通过指定了一个 Id,表示 说，要去加载 这个指定ID的 template 元素中的内容，当作 组建的HTML
            data() {
                return {
                    sonmsg: {
                        name: '小头儿子',
                        age: 6
                    }
                }
            },
            methods: {
                myclick() {
                    //当点击子组件的按钮的时候，如何拿到 父组件传递过来的 func 方法，并调用这个方法?
                    //emit 英文原意：是触发、调用、发射的意思
                    this.$emit('func', this.sonmsg);
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                //msg: '我是父组件中的数据'
                datamsgFormSon: null
            },
            methods: {
                show(data) {
                    // console.log('调用了父组件上的 show方法:---' + data.name + "-----" + data.age);
                    this.datamsgFormSon = data
                }
            },
            //components: {
            // coml: {
            // template: '<h1>这是父组件中的子组件--{{parentmsg}}</h1>',
            // props: ['parentmsg']
            //}
            //}
            components: {
                com2
            }

        })
    </script>

ref获取DOM元素和组件

 <div id="app">
        <input type="button" value="获取元素" @click="getElement" ref="mybtn">
        <h3 id="myh3" ref="myh3">哈哈哈哈，今天天空很美哦</h3>
        <hr>
        <login ref="mylogin"></login>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        var login = {
            template: '<h1>登录组件</h1>',
            data() {
                return {
                    msg: 'son msg'
                }
            },
            methods: {
                show() {
                    console.log('调用了子组件的方法');
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getElement() {
                    //console.log(document.getElementById('myh3').innerText);

                    //ref 是 英文单词 【reference】   值类型 和 引用类型 referenceError
                    //console.log(this.$refs.myh3.innerText);
                    //console.log(this.$refs.mylogin.msg);
                    this.$refs.mylogin.show();
                }
            },
            components: {
                login
            }
        })
    </script>