Vue全局API总结

Posted 2020-10-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue全局API总结相关的知识，希望对你有一定的参考价值。

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用：

父组件 + 子组件 >>> 父组件 + 子组件

mixins：

父组件 + 子组件 >>> new父组件

值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。最开始看到mixins的时候，天真的我似乎看到了一种向下的类似vuex的数据共享方案，心情十分激动啊。但是仔细一研究官方api和一些技术博客，才发现自己。。。天真。

我个人的拙见如下：

1.Vue在实例化成对象的那一刻，会通过mixin混合机制将方法直接添加到实例里面去

2.prototype方法直接将方法添加到Vue本身的构造器里面去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Vue/vue.development.js"></script>
</head>
<body>
<div id="app"></div>
<div id="app1"></div>
<script>
    Vue.mixin({
        created:function(){
            this.hello()
        },
        methods:{
            hello:function(){
                console.log(‘这是混合器添加的hello方法‘)
            },
            say:function(){
                console.log(‘这是混合器添加的say方法‘)
            }
        }
    });
    Vue.prototype.myapp=function(){
        console.log("我是外来入侵者")
    };
    var app=new Vue({
        el:"#app",
        methods:{
            lsit:function(){
                console.log(‘这是app实例本身的list方法‘)
            },
            say:function(){
                console.log(‘这是app实例本身的say方法‘)
            }
        }

    });
    var app1=new Vue({
        el:"#app1",
    });
    app.hello();
    app.lsit();
    app.say();
    app1.hello();
    app1.say();
    app.myapp();
    console.log(app.__proto__)

</script>
</body>
</html>