Vue混入

将来我们可能要定义非常多的组件，那么不可避免的是有些组件的数据、函数methods方法、监听，计算属性等都可能会重复。

那么如何提高这些（组件配置项）的复用，可以通过组件的复用mixin混入来实现vue组件配置项的复用，一个混入对象可以包含任意的组件选项

当组件中使用混入对象时，会把混入对象的配置混入进入配置项本身

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 混入选项的合并
            如果组件的配置项和混入对象的配置项出现重名的时候（方法或数据）
            在这种情况下，一般是以组件配置项为主，但也有特殊情况，比如生命周期函数 -->
        <sub-component></sub-component>
    </div>
    <template id="subComponent">
        <div>
            <h2>subComponent</h2>
            <p>组件内部定义的数据{{name}}</p>
            <p><button @click="add"> 调用组件内部的函数</button></p>
            <hr>
            <p>混入对象配置的数据{{address}}</p>
            <p><button @click="edit"> 调用混入对象的的方法</button></p>
            <hr>
            <p>name的值{{name}}</p>
            <p>age的值{{age}}</p>
            <p>address的值{{address}}</p>
            <p><button @click="add">add</button></p>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>

        /*
            混入mixin
            作用：将多个组件中公共的内容提取出来，形成一个对象，然后再组件内部配置混入对象，就可以实现复用
        */
        //定义混入对象：就是普通对象(只有配置到组件中的时候，才是混入对象)，可以定义任意的组件选项
        let myMixin = {
            data () {
                return {
                    name:'Jack',
                    age:12,
                    gender:'男',
                    address:'河南省，郑州市'
                }
            },
            methods: {
                add(){
                    console.log('混入对象的add');
                },
                remove(){
                    console.log('myMixin remove...');
                },
                edit(){
                    console.log('myMixin edit');
                }
            },
            mounted(){
                console.log('myMixin的mounted');
            },
            computed: {
                cdata(){
                    return 'hello vue';
                }
            }
        };
        Vue.component('subComponent', {
            template:'#subComponent',
            data () {
                return {
                    name:'tom',
                    gender:'女',
                    address:'浙江省温州市'
                }
            },
            methods: {
                add(){
                    console.log('组件自身定义的方法add');
                }
            },
            mounted(){
                console.log('自身的mounted');
            },
            computed: {
                cdata(){
                    return 'hello 组件自身';
                }
            },
            //混入配置
            mixins: [myMixin],
        });
        let vm = new Vue({
            el : "#app",
            data : {
                
            }
        })
    </script>
</body>
</html>