Vue学习——mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：
    1.定义混合，例如：
        {
        data(){....},
        methods:{....}
        ....
    }
    2.使用混入，例如：
        全局混入：Vue.mixin(xxx)
        局部混入：mixins:['xxx']

Blogger.vue

<template>
    <div class="blogger">
        <h1>{{msg}}</h1>
        <h2 @click="showName">博主尊称：{{name}}</h2>
        <h2>博主性别：{{sex}}</h2>
        <el-button type="primary" icon="el-icon-s-promotion" @click="skip">点我跳转到博主博客</el-button>
    </div>
</template>

<script>
import {mixin} from '../mixin'

export default {
    name:'Blogger',
    data() {
        return {
            msg:'青衫烟雨客，似是故人来',
        }
    },
    props:['name','sex'],
    mixins:[mixin]
}
</script>

<style>
    .blogger{
        text-align: center;
    }
</style>

Friend.vue

<template>
    <div class="blogger">
        <h1>{{msg}}</h1>
        <h2 @click="showName">兄弟名字：{{name}}</h2>
        <h2>兄弟性别：{{sex}}</h2>
    </div>
</template>

<script>
import {mixin} from '../mixin'

export default {
    name:'Blogger',
    data() {
        return {
            msg:'栋栋乐',
            name:'贺灵志',
            sex:'男'
        }
    },
    mixins:[mixin]
}
</script>

<style>
    .blogger{
        text-align: center;
    }
</style>

mixin.js

export const mixin = {
    methods:{
        skip() {
        window.location.href="https://xiaoyuan.blog.csdn.net/"
    },
    showName() {
        alert(this.name)
    }
  }  
}