2020年史上最全Vue框架整理从基础到实战(一)

时间 2019-12-18

标签 2020年史上 vue 框架整理基础实战繁體版

原文原文链接

vue基础

历史介绍

angular 09年，年份较早，一开始你们是拒绝 star:javascript
react 2013年, 用户体验好，直接拉到一堆粉丝 star:css
vue 2014年, 用户体验好做者:尤雨溪江苏无锡人国人骄傲html

前端框架与库的区别?

jquery 库 => DOM(操做DOM) + 请求
有可能学习了一些art-template 库 -> 模板引擎
框架
- 全方位功能齐全
- 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能
KFC的世界里,库就是一个小套餐, 框架就是全家桶
代码上的不一样
- 通常使用库的代码，是调用某个函数，咱们本身把控库的代码
- 通常使用框架，其框架在帮咱们运行咱们编写好的代码
  - 框架: 初始化自身的一些行为
    - 执行你所编写的代码
    - 施放一些资源

vue起步

1:引包前端

2:启动vue

new Vue({
    el:'#app',//目的地
    data:{
      //保存数据的地方 
    },
    template:`模板内容`
});
复制代码

插值表达式

{{ 表达式 }}
- 对象 (不要连续3个{{ {name:'jack'} }})
- 字符串 {{ 'xxx' }}
- 判断后的布尔值 {{ true }}
- 三元表达式 {{ true?'是正确':'错误' }}
能够用于页面中简单粗暴的调试
要用插值表达式必需要data中声明该属性

什么是指令

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操做就叫作指令, 以v-xxx表示java
- 好比html页面中的属性 <div v-xxx ></div>
好比在angular中以ng-xxx开头的就叫作指令react
在vue中以v-xxx开头的就叫作指令jquery
指令中封装了一些DOM行为, 结合属性做为一个暗号, 暗号有对应的值,根据不一样的值，框架会进行相关DOM操做的绑定ajax

vue中经常使用的v-指令演示

v-text:元素的textContent属性,必须是双标签跟{{ }}效果是同样的使用较少
v-html: 元素的innerHTML
v-if : 判断是否插入这个元素,至关于对元素的销毁和建立
v-else-if
v-else
v-show 隐藏元素若是肯定要隐藏, 会给元素的style加上display:none。是基于css样式的切换

v-if和v-show的区别 (官网解释)

v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。编程

v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。

通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。

v-bind使用

给元素的属性赋值
- 能够给已经存在的属性赋值 input value
- 也能够给自定义属性赋值 mydata
语法在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"

<div v-bind:原属性名="变量"></div>
<div :属性名="变量">
</div>
复制代码

v-on的使用

处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
普通使用 v-on:事件名="表达式||函数名"
简写方式 @事件名="表达式"

v-model 双向的数据绑定

双向数据流（绑定）
- 页面改变影响内存(js)
- 内存(js)改变影响页面

v-bind 和 v-model 的区别

input v-model="name"
- 双向数据绑定页面对于input的value改变，能影响内存中name变量
- 内存js改变name的值，会影响页面从新渲染最新值
input :value="name"
- 单向数据绑定内存改变影响页面改变
v-model: 其的改变影响其余 v-bind: 其的改变不影响其余
v-bind就是对属性的简单赋值,当内存中值改变，仍是会触发从新渲染

v-for的使用

基本语法 v-for="item in arr"
对象的操做 v-for="item in obj"
若是是数组没有id
- v-for="(item,index) in arr" :class="index" :key='index'
v-for的优先级最高

[TOC]

组件基础

什么是组件

其实忽然出来的这个名词,会让您不知因此然,若是你们使用过bootstrap的同窗必定会对这个名词不陌生,咱们其实在很早的时候就接触这个名词

一般一个应用会以一颗嵌套的组件树的形式来阻止:

局部组件

使用局部组件的打油诗: 建子挂子用子

注意:在组件中这个data必须是一个函数,返回一个对象

<div id="app">
      <!-- 3.使用子组件 -->
    <App></App>
</div>
<script> //1.建立子组件 const App = { //必须是一个函数 data() { return { msg: '我是App组件' } }, components: { Vcontent }, template: ` <div> <Vheader></Vheader> <div> <Vaside /> <Vcontent /> </div> </div> ` } new Vue({ el: '#app', data: { }, components: { // 2.挂载子组件 App } }) </script>
复制代码

全局组件

经过Vue.component(组件名,{})建立全局组件,此时该全局组件能够在任意模板(template)中使用

Vue.component('Child',{
    template:` <div> <h3>我是一个子组件</h3> </div> `
})
复制代码

组件通讯

父传子

若是一个网页有一个博文组件,可是若是你不能向这个组件传递某一篇博文的标题和内容之类想展现的数据的话,它是没有办法使用的.这也正是prop的由来

父组件往子组件通讯:经过Prop向子组件传递数据

Vue.component('Child',{
    template:` <div> <h3>我是一个子组件</h3> <h4>{{childData}}</h4> </div> `,
    props:['childData']
})
const App = {
    data() {
        return {
            msg: '我是父组件传进来的值'
        }
    },
    template: ` <div> <Child :childData = 'msg'></Child> </div> `,
    computed: {

    }
}
复制代码

在子组件中声明props接收在父组件挂载的属性
能够在子组件的template中任意使用
在父组件绑定自定义的属性

子传父

网页上有一些功能可能要求咱们和父组件组件进行沟通

子组件往父组件通讯: 监听子组件事件,使用事件抛出一个值

Vue.component('Child', {
    template: ` <div> <h3>我是一个子组件</h3> <h4>{{childData}}</h4> <input type="text" @input = 'handleInput'/> </div> `,
    props: ['childData'],
    methods:{
        handleInput(e){
            const val = e.target.value;
            //使用$emit触发子组件的事件
            this.$emit('inputHandler',val);
        }
    },
})

const App = {
    data() {
        return {
            msg: '我是父组件传进来的值',
            newVal:''
        }
    },
    methods:{
        input(newVal){
            // console.log(newVal);
            this.newVal = newVal;
        }
    },
    template: ` <div> <div class='father'> 数据:{{newVal}} </div> <!--子组件监听事件--> <Child :childData = 'msg' @inputHandler = 'input'></Child> </div> `,
    computed: {

    }
}
复制代码

在父组件中子组件上绑定自定义事件
在子组件中触发原生的事件在事件函数经过this.$emit触发自定义的事件

平行组件

在开发中,可能会存在没有关系的组件通讯,好比有个博客内容显示组件,还有一个表单提交组件,咱们如今提交数据到博客内容组件显示,这显示有点费劲.

为了解决这种问题,在vue中咱们可使用bus,建立中央事件总线

const bus = new Vue();
// 中央事件总线 bus
Vue.component('B', {
    data() {
        return {
            count: 0
        }
    },
    template: ` <div>{{count}}</div> `,
    created(){
        // $on 绑定事件
        bus.$on('add',(n)=>{
            this.count+=n;
        })
    }
})

Vue.component('A', {
    data() {
        return {

        }
    },
    template: ` <div> <button @click='handleClick'>加入购物车</button> </div> `,
    methods:{
        handleClick(){
            // 触发绑定的函数 // $emit 触发事件
            bus.$emit('add',1);
        }
    }
})
复制代码

其它组件通讯方式

父组件 provide来提供变量,而后再子组件中经过inject来注入变量.不管组件嵌套多深

Vue.component('B', {
    data() {
        return {
            count: 0
        }
    },
    inject:['msg'],
    created(){
        console.log(this.msg);

    },
    template: ` <div> {{msg}} </div> `,
})

Vue.component('A', {
    data() {
        return {

        }
    },
    created(){
        // console.log(this.$parent.$parent);
        // console.log(this.$children);
        console.log(this);


    },
    template: ` <div> <B></B> </div> `
})
new Vue({
    el: '#app',
    data: {

    },
    components: {
        // 2.挂载子组件
        App
    }

})
复制代码

插槽

匿名插槽

子组件定义 slot 插槽，但并未具名，所以也能够说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去

Vue.component('MBtn', {
    template: ` <button> <slot></slot> </button> `,
    props: {
        type: {
            type: String,
            defaultValue: 'default'
        }
    },
})

const App = {
    data() {
        return {

        }
    },
    template: ` <div> <m-btn>登陆</m-btn> <m-btn>注册</m-btn> <m-btn>提交</m-btn> </div> `,
}
new Vue({
    el: '#app',
    data: {

    },
    components: {
        // 2.挂载子组件
        App
    }

})
复制代码

具名插槽

具名插槽能够出如今不一样的地方，不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去

Vue.component('MBtn',{
    template:` <button :class='type' @click='clickHandle'> <slot name='register'></slot> <slot name='login'></slot> <slot name='submit'></slot> </button> `,
    props:{
        type:{
            type: String,
            defaultValue: 'default'
        }
    },
    methods:{
        clickHandle(){
            this.$emit('click');
        }
    }
})

const App = {
    data() {
        return {

        }
    },
    methods:{
        handleClick(){
            alert(1);
        },
        handleClick2(){
            alert(2);
        }
    },
    template: ` <div> <MBtn type='default' @click='handleClick'> <template slot='register'> 注册 </template> </MBtn> <MBtn type='success' @click='handleClick2'> <template slot='login'> 登陆 </template> </MBtn> <MBtn type='danger'> <template slot='submit'> 提交 </template> </MBtn> </div> `,
}
new Vue({
    el: '#app',
    data: {

    },
    components: {
        App
    }

})
复制代码

做用域插槽

一般状况下普通的插槽是父组件使用插槽过程当中传入东西决定了插槽的内容。但有时咱们须要获取到子组件提供的一些数据，那么做用域插槽就排上用场了

Vue.component('MyComp', {
    data(){
        return {
            data:{
                username:'小马哥'
            }
        }
    },
    template: ` <div> <slot :data = 'data'></slot> <slot :data = 'data' name='one'></slot> </div> `
})

const App = {
    data() {
        return {

        }
    },
    template: ` <div> <MyComp> <!--默认的插槽 default能够省略--> <template v-slot:default='user'> {{user.data.username}} </template> </MyComp> <MyComp> <!--与具名插槽配合使用--> <template v-slot:one='user'> {{user.data.username}} </template> </MyComp> </div> `,
}
new Vue({
    el: '#app',
    data: {

    },
    components: {
        App
    }

})
复制代码

做用域插槽应用

先说一下咱们假设的应用经常使用场景，咱们已经开发了一个代办事项列表的组件，不少模块在用，如今要求在不影响已测试经过的模块功能和展现的状况下，给已完成的代办项增长一个对勾效果。

也就是说，代办事项列表组件要知足一下几点

以前数据格式和引用接口不变，正常展现
新的功能模块增长对勾

const todoList = {
   data(){
       return {

       }
   },
   props:{
       todos:Array,
       defaultValue:[]
   },
   template:` <ul> <li v-for='item in todos' :key='item.id'> <slot :itemValue='item'> {{item.title}} </slot> </li> </ul> `
}

const App = {
   data() {
       return {
           todoList: [
               {
                   title: '大哥你好么',
                   isComplate:true,
                   id: 1
               },
               {
                   title: '小弟我还行',
                   isComplate:false,
                   id: 2
               },
               {
                   title: '你在干什么',
                   isComplate:false,
                   id: 3
               },
               {
                   title: '抽烟喝酒烫头',
                   isComplate:true,
                   id: 4
               }
           ]
       }
   },
   components:{
       todoList
   },
   template: ` <todoList :todos='todoList'> <template v-slot='data'> <input type='checkbox' v-model='data.itemValue.isComplate'/> {{data.itemValue.title}} </template> </todoList> `,
}
new Vue({
   el: '#app',
   data: {

   },
   components: {
       App
   }

})
复制代码

生命周期

“你不须要立马弄明白全部的东西，不过随着你的不断学习和使用，它的参考价值会愈来愈高。

当你在作项目过程当中,遇到了这种问题的时候,再回过头来看这张图

什么是生命周期

每一个 Vue 实例在被建立时都要通过一系列的初始化过程。例如：从开始建立、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。咱们称 这一系列的过程 就是Vue的生命周期。通俗说就是Vue实例从建立到销毁的过程，就是生命周期。同时在这个过程当中也会运行一些叫作生命周期钩子的函数，这给了用户在不一样阶段添加本身的代码的机会，利用各个钩子来完成咱们的业务代码。

干活满满

生命周期钩子

beforCreate

实例初始化以后、建立实例以前的执行的钩子事件

Vue.component('Test',{
   data(){
       return {
           msg:'小马哥'
       }
   },
   template:` <div> <h3>{{msg}}</h3> </div> `,
   beforeCreate:function(){
       // 组件建立以前
       console.log(this.$data);//undefined

   }
})
复制代码

效果:

建立实例以前，数据观察和事件配置都没好准备好。也就是数据也没有、DOM也没生成

created

实例建立完成后执行的钩子

created() {
    console.log('组件建立', this.$data);
}
复制代码

效果:

实例建立完成后，咱们能读取到数据data的值，可是DOM还没生成,能够在此时发起ajax

beforeMount

将编译完成的html挂载到对应的虚拟DOM时触发的钩子此时页面并无内容。即此阶段解读为: 即将挂载

beforeMount(){
    // 挂载数据到 DOM以前会调用
    console.log('DOM挂载以前',document.getElementById('app'));
}
复制代码

效果:

mounted

编译好的html挂载到页面完成后所执行的事件钩子函数

mounted() {
    console.log('DOM挂载完成',document.getElementById('app'));
}
复制代码

效果:

beforeUpdate和updated

beforeUpdate() {
    // 在更新DOM以前 调用该钩子，应用：能够获取原始的DOM
    console.log('DOM更新以前', document.getElementById('app').innerHTML);
},
updated() {
    // 在更新DOM以后调用该钩子，应用：能够获取最新的DOM
  console.log('DOM更新完成', document.getElementById('app').innerHTML);
}
复制代码

效果:

beforeDestroy和destroyed

当子组件在v-if的条件切换时,该组价处于建立和销毁的状态

beforeDestroy() {
    console.log('beforeDestroy');
},
destroyed() {
    console.log('destroyed');
},
复制代码

activated和deactivated

当配合vue的内置组件<keep-alive>一块儿使用的时候,才会调用下面此方法

<keep-alive>组件的做用它能够缓存当前组件

activated() {
    console.log('组件被激活了');
},
deactivated() {
   console.log('组件被停用了');
},
复制代码

组件进阶

动态组件

有的时候,在不一样组件之间进行动态切换是很是有用的,好比在一个多标签的界面里

const bus = new Vue();
Vue.component('TabLi', {
    data() {
        return {

        }
    },
    methods: {
        clickHandler(title) {
            bus.$emit('handleChange', title);
        }
    },
    props: ['tabTitles'],
    template: ` <ul> <li @click='clickHandler(title)' v-for='(title,i) in tabTitles' :key='i'>{{title}}</li> </ul> `
})
const Home = {
    data() {
        return {
            isActive:false
        }
    },
    methods: {
        handleClick(){
            this.isActive = true;
        }
    },
    template: `<div @click='handleClick' :class='{active:isActive}'>Home Component</div>`
}
const Posts = {
    data() {
        return {

        }
    },
    template: `<div>Posts Component</div>`
}
const Archive = {
    data() {
        return {

        }
    },
    template: `<div>Archive Component</div>`
}
Vue.component('TabComp', {
    data() {
        return {
            title: 'Home'
        }
    },
    created() {
        bus.$on('handleChange', (title) => {
            this.title = title
        })
    },
    template: ` <div class='content'> <componet :is='title'></componet> </div> `,
    components: {
        Home,
        Posts,
        Archive
    }
})

const App = {
    data() {
        return {
            tabTitles: ['Home', 'Posts', 'Archive']
        }
    },
    template: ` <div> <TabLi :tabTitles='tabTitles'></TabLi> <TabComp></TabComp> </div> `,

}
new Vue({
    el: '#app',
    data() {
        return {

        }
    },
    components: {
        App,

    }
})
复制代码

使用is特性来切换不一样的组件

当在这些组件之间切换的时候,有时候会想保持这些组件的状态,以免反复渲染致使的性能问题

在动态组件上使用`keep-alive`

<keep-alive>
    <componet :is='title'></componet>
</keep-alive>
复制代码

异步组件

在大型应用中，咱们可能须要将应用分割成小一些的代码块，而且只在须要的时候才从服务器加载一个模块。为了简化，Vue 容许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件须要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供将来重渲染。例如：

const App = {
    data() {
        return {
            isShow:false
        }
    },
    methods:{
        asyncLoadTest(){
            this.isShow = true;
        }
    },
    template:` <div> <button @click='asyncLoadTest'>异步加载</button> <test v-if='isShow'/> </div> `,
    components:{
        //异步加载组件
        test:()=>import('./Test.js')
    }
}
new Vue({
    el:'#app',
    data(){
        return {

        }
    },
    components:{
        App
    }
})
复制代码

效果显示:

获取DOM和子组件对象

尽管存在 prop 和事件，有的时候你仍可能须要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你能够经过 ref 特性为这个子组件赋予一个 ID 引用。例如：

const Test = {
    template: `<div class='test'>我是测试组件</div>`
}
const App = {
    data() {
        return {

        }
    },
    created() {
        console.log(this.$refs.test); //undefined

    },
    mounted() {
        // 若是是组件挂载了ref 获取是组件对象,若是是标签挂载了ref,则获取的是DOM元素
        console.log(this.$refs.test);
        console.log(this.$refs.btn);

        // 加载页面 让input自动获取焦点
        this.$refs.input.focus();

    },
    components: {
        Test
    },
    template: ` <div> <button ref = 'btn'></button> <input type="text" ref='input'> <Test ref = 'test'></Test> </div> `
}
new Vue({
    el: '#app',
    data: {

    },
    components: {
        App
    }
})
复制代码

nextTick的用法

将回调延迟到下次 DOM 更新循环以后执行。在修改数据以后当即使用它，而后等待 DOM 更新

有些事情你可能想不到,vue在更新DOM时是异步执行的.只要侦听到数据变化,Vue将开启一个队列,并缓存在同一事件循环中发生的全部数据变动.若是同一个wather被屡次触发,只会被推入到队列中一次.这种在缓冲时去除重复数据对于避免没必要要的计算和 DOM 操做是很是重要的。而后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工做

<div id="app">
    <h3>{{message}}</h3>
</div>
<script src="./vue.js"></script>
<script> const vm = new Vue({ el:'#app', data:{ message:'123' } }) vm.message = 'new Message';//更新数据 console.log(vm.$el.textContent); //123 Vue.nextTick(()=>{ console.log(vm.$el.textContent); //new Message }) </script>
复制代码

当你设置vm.message = 'new Message',该组件不会当即从新渲染.当刷新队列时,组件会在下一个事件循环'tick'中更新.多数状况咱们不须要关心这个过程，可是若是你想基于更新后的 DOM 状态来作点什么，这就可能会有些棘手。虽然 Vue.js 一般鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，可是有时咱们必需要这么作。为了在数据变化以后等待 Vue 完成更新 DOM，能够在数据变化以后当即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

nextTick的应用

有个需求:

在页面拉取一个接口，这个接口返回一些数据，这些数据是这个页面的一个浮层组件要依赖的，而后我在接口一返回数据就展现了这个浮层组件，展现的同时，上报一些数据给后台（这些数据就是父组件从接口拿的），这个时候，神奇的事情发生了，虽然我拿到数据了，可是浮层展示的时候，这些数据还未更新到组件上去,上报失败

const Pop = {
    data() {
        return {
            isShow:false
        }
    },
    template:` <div v-show = 'isShow'> {{name}} </div> `,
    props:['name'],
    methods: {
        show(){
            this.isShow = true; 
            alert(this.name);
        }
    },
}
const App = {
    data() {
        return {
            name:''
        }
    },
    created() {
        // 模拟异步请求的数据
        setTimeout(() => {
            this.name = '小马哥',
            this.$refs.pop.show();
        }, 2000);
    },
    components:{
        Pop
    },
    template: `<pop ref='pop' :name='name'></pop>`
}
const vm = new Vue({
    el: '#app',
    components: {
        App
    }
})
复制代码

完美解决:

created() {
     // 模拟异步请求的数据
     setTimeout(() => {
         this.name = '小马哥',
          this.$nextTick(()=>{
               this.$refs.pop.show();
         })
     }, 2000);
},
复制代码

对象变动检测注意事项

因为JavaScript的限制,Vue不能检测对象属性的添加和删除

对于已经建立的实例,Vue不容许动态添加根级别的响应式属性.可是,能够经过Vue.set(object,key,value)方法向嵌套独享添加响应式属性

<div id="app">
    <h3>
        {{user.name}}{{user.age}}
        <button @click='handleAdd'>添加年龄</button>
    </h3>
</div>
<script src="./vue.js"></script>
<script> new Vue({ el:'#app', data:{ user:{}, }, created() { setTimeout(() => { this.user = { name:'张三' } }, 1250); }, methods: { handleAdd(){ console.log(this); // 无响应式  // this.user.age = 20; // 响应式的 this.$set(this.user,'age',20); } }, }) </script>
复制代码

this.$set(this.user,'age',20);//它只是全局Vue.set的别名
复制代码

若是想为已存在的对象赋值多个属性,可使用Object.assign()

// 一次性响应式的添加多个属性
this.user = Object.assign({}, this.user, {
    age: 20,
    phone: '113131313'
})
复制代码

混入mixin偷懒

混入(mixin)提供了一种很是灵活的方式,来分发Vue组件中的可复用功能.一个混入对象能够包含任意组件选项.

一个混入对象能够包含任意组件选项。当组件使用混入对象时，全部混入对象的选项将被“混合”进入该组件自己的选项。

<div id="app">
    {{msg}}
</div>
<script src="./vue.js"></script>
<script> const myMixin = { data(){ return { msg:'123' } }, created() { this.sayHello() }, methods: { sayHello(){ console.log('hello mixin') } }, } new Vue({ el: '#app', data(){ return { msg:'小马哥' } }, mixins: [myMixin] }) 复制代码

mixin应用

有一种很难常见的状况:有两个很是类似的组件,他们共享一样的基本函数,而且他们之间也有足够的不一样,这时你站在了一个十字路口：我是把它拆分红两个不一样的组件？仍是只使用一个组件，建立足够的属性来改变不一样的状况。

这些解决方案都不够完美：若是你拆分红两个组件，你就不得不冒着若是功能变更你要在两个文件中更新它的风险，这违背了 DRY 前提。另外一方面，太多的属性会很快会变得混乱不堪，对维护者很不友好，甚至是你本身，为了使用它，须要理解一大段上下文，这会让你感到失望。

使用混合。Vue 中的混合对编写函数式风格的代码颇有用，由于函数式编程就是经过减小移动的部分让代码更好理解。混合容许你封装一块在应用的其余组件中均可以使用的函数。若是被正确的使用，他们不会改变函数做用域外部的任何东西，因此屡次执行，只要是一样的输入你老是能获得同样的值。这真的很强大。

咱们有一对不一样的组件,他们的做用是切换一个状态布尔值,一个模态框和一个提示框.这些提示框和模态框除了在功能,没有其它共同点:它们看起来不同,用法不同,可是逻辑同样

<div id="app">
    <App></App>
</div>
<script src="./vue.js"></script>
<script> // 全局混入 要格外当心 每次实例建立 都会调用 Vue.mixin({ created(){ console.log('hello from mixin!!'); } }) // 抽离 const toggleShow = { data() { return { isShow: false } }, methods: { toggleShow() { this.isShow = !this.isShow } } } const Modal = { template: `<div v-if='isShow'><h3>模态框组件</h3></div>`, data() { return { } }, mixins:[toggleShow] } const ToolTip = { data() { return { } }, template: `<div v-if='isShow'><h3>提示组件</h3></div>`, mixins:[toggleShow] } const App = { data() { return { } }, template: ` <div> <button @click='handleModel'>模态框</button> <button @click='handleToolTip'>提示框</button> <Modal ref='modal'></Modal> <ToolTip ref="toolTip"></ToolTip> </div> `, components: { Modal, ToolTip }, methods: { handleModel() { this.$refs.modal.toggleShow() }, handleToolTip() { this.$refs.toolTip.toggleShow() } }, } new Vue({ el: '#app', data: {}, components: { App }, }) 复制代码

往期文章

2019年末史上最全Vue框架整理从基础到实战(二)

2019年末史上最全Vue框架整理从基础到实战(三)

2019年末史上最全Vue框架整理从基础到实战(四)

2019年末史上最全Vue框架整理从基础到实战(五)

最后

还有2件事拜托你们

一：求赞求收藏求分享求留言，让更多的人看到这篇内容

二：欢迎添加个人我的微信

备注“资料”， 300多篇原创技术文章，海量的视频资料便可得到

备注“加群”，我会拉你进技术交流群，群里大牛学霸具在，哪怕您作个潜水鱼也会学到不少东西