【Vue3 从入门到实战进阶式掌握完整知识体系】024-Vue中的高级语法：Mixin混入的基础语法

怼烎@ 2023-10-03 09:46 7阅读 0赞

### 文章目录 ###

*  五、Vue中的高级语法
 *   *  1、Mixin混入的基础语法
     *   *  混入data
         *  运行结果
         *  混入生命周期函数
         *  运行结果
         *  组件和混入同时存在同一生命周期函数
         *  运行结果
         *  混入方法
         *  运行结果
         *  使用全局Mixin
         *  运行结果
         *  自定义属性
         *  运行结果
         *  修改自定义属性的优先级
         *  运行结果

# 五、Vue中的高级语法 #

## 1、Mixin混入的基础语法 ##

> 不推荐使用全局 mixin，vue3之后就不推荐使用 mixin 了，组合式 api 取代 mixin ， mixin 的可维护性不高！

### 混入data ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      // Minxin 混入
      const mymixin = {
         
        data(){
         
          return{
         
            num: 2,
            count: 100
          }
        }
      }
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            num: 1
          }
        },
        // mixins：我们知道 vue实例自身数据里面有个 num 这里又混入一个 num
        // 当混入的内容与组件原有内容有冲突时，优先使用原有的内容
        // 当组件原有内容不存在混入的内容时，使用混入的内容
        // 优先级：组件 data > mixin data
        mixins: [mymixin],
        methods:{
         
          handleClick(){
         
            console.log("handleClick");
          }
        },
        // num 组件数据里面有，使用组件里面的 1
        // count 组件数据里面没有，就是用混入里面的 100
        template: `
            <div>
              <div>{
          {num}}</div>
              <div>{
          {count}}</div>
              <button @click="handleClick">点击</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210614095009285.png][]

### 混入生命周期函数 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      // Minxin 混入
      const mymixin = {
         
        data(){
         
          return{
         
            num: 2,
            count: 100
          }
        },
        // 混入生命周期函数
        created(){
         
          console.log("混入生命周期函数：created");
        }
      }
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            num: 1
          }
        },
        // mixins：我们知道 vue实例自身数据里面有个 num 这里又混入一个 num
        // 当混入的内容与组件原有内容有冲突时，优先使用原有的内容
        // 当组件原有内容不存在混入的内容时，使用混入的内容
        // 优先级：组件 data > mixin data
        mixins: [mymixin],
        methods:{
         
          handleClick(){
         
            console.log("handleClick");
          }
        },
        // num 组件数据里面有，使用组件里面的 1
        // count 组件数据里面没有，就是用混入里面的 100
        template: `
            <div>
              <div>{
          {num}}</div>
              <div>{
          {count}}</div>
              <button @click="handleClick">点击</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210614095204466.png][]

### 组件和混入同时存在同一生命周期函数 ###

> 都会执行：先执行混入的生命周期函数，后执行组件的生命周期函数

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      // Minxin 混入
      const mymixin = {
         
        data(){
         
          return{
         
            num: 2,
            count: 100
          }
        },
        // 混入生命周期函数
        created(){
         
          console.log("混入生命周期函数：created");
        }
      }
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            num: 1
          }
        },
        // mixins：我们知道 vue实例自身数据里面有个 num 这里又混入一个 num
        // 当混入的内容与组件原有内容有冲突时，优先使用原有的内容
        // 当组件原有内容不存在混入的内容时，使用混入的内容
        // 优先级：组件 data > mixin data
        mixins: [mymixin],
        methods:{
         
          handleClick(){
         
            console.log("handleClick");
          }
        },
        // 组件生命周期函数
        created(){
         
          console.log("组件生命周期函数：created");
        },
        // num 组件数据里面有，使用组件里面的 1
        // count 组件数据里面没有，就是用混入里面的 100
        template: `
            <div>
              <div>{
          {num}}</div>
              <div>{
          {count}}</div>
              <button @click="handleClick">点击</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210614095440099.png][]

### 混入方法 ###

> 类似混入data，优先级：组件内的方法 > 混入的方法；

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      // Minxin 混入
      const mymixin = {
         
        // 混入数据
        data(){
         
          return{
         
            num: 2,
            count: 100
          }
        },
        // 混入生命周期函数
        created(){
         
          console.log("混入生命周期函数：created");
        },
        // 混入方法
        methods:{
         
          // 组件内存在的方法
          handleClick(){
         
            console.log("混入的handleClick");
          },
          // 组件内不存在的方法
          handleClick2(){
         
            console.log("混入的handleClick2");
          }
        }
      }
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            num: 1
          }
        },
        // mixins：我们知道 vue实例自身数据里面有个 num 这里又混入一个 num
        // 当混入的内容与组件原有内容有冲突时，优先使用原有的内容
        // 当组件原有内容不存在混入的内容时，使用混入的内容
        // 优先级：组件 data > mixin data
        mixins: [mymixin],
        methods:{
         
          handleClick(){
         
            console.log("handleClick");
          }
        },
        // 组件生命周期函数
        created(){
         
          console.log("组件生命周期函数：created");
        },
        // num 组件数据里面有，使用组件里面的 1
        // count 组件数据里面没有，就是用混入里面的 100
        template: `
            <div>
              <div>{
          {num}}</div>
              <div>{
          {count}}</div>
              <button @click="handleClick(), handleClick2()">点击</button>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210614100029044.png][]

### 使用全局Mixin ###

> 全局的Maixin不推荐使用！

> 默认再父组件引入的 mixin 无法在子组件里面使用，需要子组件也引入，当前我们定义的 mixin 是局部的 mixin ，让我们来定义全局的 mixin ， 全局的 mixin 和全局组件非常类似！

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            num: 1
          }
        },
        // 不需要引入了
        // mixins: [mymixin],
        methods:{
         
          handleClick(){
         
            console.log("handleClick");
          }
        },
        // 组件生命周期函数
        created(){
         
          console.log("组件生命周期函数：created");
        },
        template: `
            <div>
              <div>{
          {num}}</div>
              <div>{
          {count}}</div>
              <child />
              <button @click="handleClick(), handleClick2()">点击</button>
            </div>
        `
      });
    
      // 定义全局 mixin
      app.mixin({
         
        // 混入数据
        data(){
         
          return{
         
            num: 2,
            count: 100
          }
        },
        // 混入生命周期函数
        created(){
         
          console.log("混入生命周期函数：created");
        },
        // 混入方法
        methods:{
         
          // 组件内存在的方法
          handleClick(){
         
            console.log("混入的handleClick");
          },
          // 组件内不存在的方法
          handleClick2(){
         
            console.log("混入的handleClick2");
          }
        }
      });
    
      // 定义子组件
      app.component("child", {
         
        // 不需要引入了
        // mixins: [mymixin],
        template: `
          <div> 子组件里混入的count：{
          {count}}</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210614102001166.png][]

### 自定义属性 ###

### 运行结果 ###

![image-20210614102817081.png][]

### 修改自定义属性的优先级 ###

### 运行结果 ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yhJDN1ml-1625061024918)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a074c7dbc41049edacead88cadd66093~tplv-k3u1fbpfcp-watermark.image)\]

[image-20210614095009285.png]: https://img-blog.csdnimg.cn/img_convert/217479bfc7210c1ddb13cf250b012e28.png
[image-20210614095204466.png]: https://img-blog.csdnimg.cn/img_convert/417067667137b40ecb505aa89500013c.png
[image-20210614095440099.png]: https://img-blog.csdnimg.cn/img_convert/48bf2b102653951d4418cb890981a3a4.png
[image-20210614100029044.png]: https://img-blog.csdnimg.cn/img_convert/b1b1b356b83e79b12810498be86db82e.png
[image-20210614102001166.png]: https://img-blog.csdnimg.cn/img_convert/98f6543bfbf2e174e34cc208ee9c244f.png
[image-20210614102817081.png]: https://img-blog.csdnimg.cn/img_convert/7e30ee3845b2f7f32af3547e0ec7227a.png