vue混入自我理解

最新推荐文章于 2024-03-04 08:30:00 发布

星辰志

最新推荐文章于 2024-03-04 08:30:00 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/jaquechen/article/details/98100516

版权

vue混入代码之混入vue父组件混入子组件或者时主组件混入副组件的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="test">
        <test></test>
    </div>
</body>
    <script>
         // 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('我从哪儿来!');
      alert("理性传值");
    }
  }
}
    Vue.component('test',{
        mixins: [myMixin],
        template:'<h1>测试</h1>',
    })

new Vue({
    el:'#test',
})
        // 
    </script>
</html>

下面代码再次论证，vue是一个个组件连接的组成的项目结构，每一个vue实例都是一个组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项合并</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="test"></div>
</body>
    <script>
        var mixin = {
            data:function(){
                return{
                    message:'hello',
                    foo:'abc'
                }
            }
        }
        new Vue({
            mixins: [mixin],
            data:function(){
                return{
                    message:'goodbye',
                    bar:'def'
                }
            },
            created:function(){
                console.log(this.$data);
            }
        })
    </script>
</html>

运行结果如下，说明对于数据的调用，也就是数据绑定方面，组件是远远大于混入的，注意混入的message的值不在浏览器显示。

关于钩子函数组件和混入的优先级代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="test"></div>
</body>
    <script>
        var mixin = {
            created:function(){
                console.log('混入对象的钩子被调用')
            }
        }
        new Vue({
            el:'#test',
            mixins: [mixin],
            created:function(){
                console.log('组件钩子被调用');
            }
        })
    </script>
</html>

运行的结果表明，混入调用钩子函数大于组件也许是页面顺序的原因，因为html页面的加载是从上往下的，而混入必须定义在组件前面才能在组件中引用，否则就会出现某某未定义。官网解释：同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

全局混入混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="test"></div>
</body>
    <script>
        Vue.mixin({
        created: function () {
        var myOption = this.$options.myOption
        if (myOption) {
        console.log(myOption)
         }
       }
   })
   
    new Vue({
    el:'#test',
  myOption: 'hello!'
   })
// => "hello!"
    </script>
</html>

运行结果

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

星辰志

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue混入自我理解

vue混入代码之混入vue父组件混入子组件或者时主组件混入副组件的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
复制链接

扫一扫