美文网首页
vue + mixins 使用实例

vue + mixins 使用实例

作者: 努力学习的小丸子 | 来源:发表于2019-06-17 19:19 被阅读0次

mixins可写入的模块

mixins可写入组件export default 中的所有内容。data , methods , components , computed 和 钩子函数。这些内容会根据不同的规则融合到组件中。

data,methods和components

在组件中可以调用的data为本身的data和mixins中data的并集 , 如果data的键冲突,以组件本身的值为准;
methods和components同理

钩子函数

组件和minxins中的钩子函数都会被执行,mixins在组件之前。


image.png

例子

<template>
<div id="">
    <input v-model="msg"/>
</div>

</template>
<script>
    var mixin = {
        data(){
            return {
                msg:'mixins:msg',
                name:'mixins:name'
            }
        },
        methods: {
            hello() {
                console.log('mixin:hello')
            }
        },
        beforeCreated(){
            console.log("mixins:beforeCreated");
        },
        created() {
            console.log("mixins:created");
        },
        beforeMount(){
            console.log("mixins:beforeMount");
        },
        mounted(){
            console.log("mixins:mounted");
        },
        beforeUpdate(){
            console.log("mixins:beforeUpdate");
        },
        updated(){
            console.log("mixins:updated");
        },
        beforeDestory(){
            console.log("mixins:beforeDestory");
        },
        destoryed(){
            console.log("mixins:destoryed");
        }
        
    }
    export default {
        mixins: [mixin],
        data() {
            return {
                msg:'组件msg'
            }
        },
        methods: {
            hello() {
                console.log('组件:hello')
            }
        },
        beforeCreated(){
            console.log("组件:beforeCreated");
        },
        created() {
            console.log("组件:created");
        },
        beforeMount(){
            console.log("组件:beforeMount");
        },
        mounted(){
            console.log("组件:mounted");
            console.log(this.$data);
        },
        beforeUpdate(){
            console.log("组件:beforeUpdate");
        },
        updated(){
            console.log("组件:updated");
        },
        beforeDestory(){
            console.log("组件:beforeDestory");
        },
        destoryed(){
            console.log("组件:destoryed");
        }
    }
</script>

相关文章

  • vue + mixins 使用实例

    mixins可写入的模块 mixins可写入组件export default 中的所有内容。data , meth...

  • Vue高级特性「九」-- mixin 混入

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用 mixin使用实例 index.vue...

  • 16-Vue之混入mixin的使用

    Vue之混入mixins(非完整版) 一、mixins基础介绍(不使用cli版本) 1.首先我们看一下vue官网对...

  • vue2中的mixins

    mixins: 混合对象, 功能类似于Vue.extend(); 使用时,在组件的选项中添加mixins: [mi...

  • Vue 之 Mixins (混入)

    Mixins Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。 什么时候使用Mixins 页面的...

  • Vue 混入(mixins和Vue.mixin)

    1.mixins和Vue.mixin mixins 混入 (mixins) 是一种分发 Vue 组件中可复用功能的...

  • vue2 — Mixins

    Mixins选项接受一个混合对象的数组,这些混合的实例对象可以像正常的实例对象一样包含选项,在Vue.extend...

  • vue mixins的使用

    mixins是一种将组件功能复用的方式,简单来说就是讲组件的数据、钩子、方法、等封装在一个对象里面,然后在组建中m...

  • 给Vue扩展方法

    在Vue中我们有如下生命周期方法: 给vue增加一个扩展函数 Vue合并策略在Vue中使用mixins时会发现, ...

  • mixins

    vue混入(mixins) 简介 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混...

网友评论

      本文标题:vue + mixins 使用实例

      本文链接:https://www.haomeiwen.com/subject/kxbzfctx.html