Vue中mixins混入基础概念

最新推荐文章于 2023-02-20 12:56:18 发布

阿喵~~

最新推荐文章于 2023-02-20 12:56:18 发布

阅读量707

点赞数

分类专栏：整理文章标签： Vue中mixins混入基础概念

本文链接：https://blog.csdn.net/qq_40616529/article/details/93357001

版权

整理专栏收录该内容

31 篇文章 0 订阅

订阅专栏

mixins混入实际意义：

mixins 是vue.js的一个选项，接受一个混入对象的数组

意义：将组件的选项抽离出去，单独管理，复用

有两种使用形式
- 局部混入
- 全局混入

局部混入


<html>//html示例代码块
    <div id="app">
      <button @click="add">add</button>
    </div>
</html>


//正常定义事件方法
 new Vue({
         el:'#app',
         methods:{
            add(){
               alert('你好')
            }
         }
         
      })
      
      
//mixins局部混入写法
 <script> 
       var mixinObj = { //组件抽离单独写出
            methods: {
               add () {
                  console.log ( '你好' )
               }
            }
         }
    
         new Vue({
             el:'#app',
             mixins:[ mixinObj ],//通过mixins选项局部混入
             
             methods:{
                 add () { // 如果实例中方法名和mixins中的方法名相同，那么实例中的触发
                    console.log( '实例中add' )
                }
            }
             
        })
          
 </script>

//全局混入

<body>
  <div id="app">
    <button @click = "add"> add </button>
  </div>
</body>


<script>
 /*
 全局的混入 : Vue.mixin({}) 直接添加在Vue构造函数上 ,所以创建的实例会自动携带mixins内的函数，
 所以所有new Vue 的实例都会携带mixins内的方法，因此不建议使用全局混入的方法。
 */

  Vue.mixin({
    methods: {
      add () {
       alert ( 'add' )
      }
    }
  })

  new Vue({
    el: '#app',
    data: {},
  })
</script>

阿喵~~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中mixins混入基础概念

mixins混入实际意义：mixins 是vue.js的一个选项，接受一个混入对象的数组意义：将组件的选项抽离出去，单独管理，复用有两种使用形式局部混入全局混入局部混入<html>//html示例代码块 <div id="app"> <button @click="add">add</button> ...
复制链接

扫一扫