10个Vue开发技巧

路由参数解耦

一般在组件内使用路由参数，大多数人会这样做：

 
 
 
 
    
  
  
  
  
  1. export default {
    2. 
  
  
  
  
  2.     methods: {
    3. 
  
  
  
  
  3.         getParamsId() {
    4. 
  
  
  
  
  4.             return this.$route.params.id
    5. 
  
  
  
  
  5.         }
    6. 
  
  
  
  
  6.     }
    7. 
  
  
  
  
  7. }
    8.

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

正确的做法是通过 props 解耦

 
 
 
 
    
  
  
  
  
  1. const router = new VueRouter({
    2. 
  
  
  
  
  2.     routes: [{
    3. 
  
  
  
  
  3.         path: '/user/:id',
    4. 
  
  
  
  
  4.         component: User,
    5. 
  
  
  
  
  5.         props: true
    6. 
  
  
  
  
  6.     }]
    7. 
  
  
  
  
  7. })
    8.

将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数

 
 
 
 
    
  
  
  
  
  1. export default {
    2. 
  
  
  
  
  2.     props: ['id'],
    3. 
  
  
  
  
  3.     methods: {
    4. 
  
  
  
  
  4.         getParamsId() {
    5. 
  
  
  
  
  5.             return this.id
    6. 
  
  
  
  
  6.         }
    7. 
  
  
  
  
  7.     }
    8. 
  
  
  
  
  8. }
    9.

另外你还可以通过函数模式来返回 props

 
 
 
 
    
  
  
  
  
  1. const router = new VueRouter({
    2. 
  
  
  
  
  2.     routes: [{
    3. 
  
  
  
  
  3.         path: '/user/:id',
    4. 
  
  
  
  
  4.         component: User,
    5. 
  
  
  
  
  5.         props: (route) => ({
    6. 
  
  
  
  
  6.             id: route.query.id
    7. 
  
  
  
  
  7.         })
    8. 
  
  
  
  
  8.     }]
    9. 
  
  
  
  
  9. })
    10.

文档：router.vuejs.org/zh/guide/es…

函数式组件

函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。

组件需要的一切都是通过 context 参数传递。它是一个上下文对象，具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。

函数式组件：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.         
    4. 
  
  
  
  
  4.             
    {{item.title}}
    5. 
  
  
  
  
  5.             
    {{item.content}}
    6. 
  
  
  
  
  6.         
  •     

  • 父组件使用：

     
 
 
 
      
  
  
  
  
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. import List from '@/components/List.vue'
      2. 
  
  
  
  
    2. export default {
      3. 
  
  
  
  
    3.     components: {
      4. 
  
  
  
  
    4.         List
      5. 
  
  
  
  
    5.     },
      6. 
  
  
  
  
    6.     data() {
      7. 
  
  
  
  
    7.         return {
      8. 
  
  
  
  
    8.             list: [{
      9. 
  
  
  
  
    9.                 title: 'title',
      10. 
  
  
  
  
    10.                 content: 'content'
      11. 
  
  
  
  
    11.             }],
      12. 
  
  
  
  
    12.             currentItem: ''
      13. 
  
  
  
  
    13.         }
      14. 
  
  
  
  
    14.     }
      15. 
  
  
  
  
    15. }
      16.

    文档：cn.vuejs.org/v2/guide/re…

    样式穿透

    在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用(组件样式污染、不够优雅)，样式穿透在css预处理器中使用才生效。

    我们可以使用 >>> 或 /deep/ 解决这一问题：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2. 外层 >>> .el-checkbox {
      3. 
  
  
  
  
    3.   display: block;
      4. 
  
  
  
  
    4.   font-size: 26px;
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.   .el-checkbox__label {
      7. 
  
  
  
  
    7.     font-size: 16px;
      8. 
  
  
  
  
    8.   }
      9. 
  
  
  
  
    9. }
      10. 
  
  
  
  
    10. 
 
 
 
 
     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2. /deep/ .el-checkbox {
      3. 
  
  
  
  
    3.   display: block;
      4. 
  
  
  
  
    4.   font-size: 26px;
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.   .el-checkbox__label {
      7. 
  
  
  
  
    7.     font-size: 16px;
      8. 
  
  
  
  
    8.   }
      9. 
  
  
  
  
    9. }
      10. 
  
  
  
  
    10.

    watch高阶使用

    1. 立即执行

    watch 是在监听属性改变时才会触发，有些时候，我们希望在组件创建后 watch 能够立即执行。

    可能想到的的方法就是在 create 生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法：

     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     data() {
      3. 
  
  
  
  
    3.         return {
      4. 
  
  
  
  
    4.             name: 'Joe'
      5. 
  
  
  
  
    5.         }
      6. 
  
  
  
  
    6.     },
      7. 
  
  
  
  
    7.     watch: {
      8. 
  
  
  
  
    8.         name: {
      9. 
  
  
  
  
    9.             handler: 'sayName',
      10. 
  
  
  
  
    10.             immediate: true
      11. 
  
  
  
  
    11.         }
      12. 
  
  
  
  
    12.     },
      13. 
  
  
  
  
    13.     methods: {
      14. 
  
  
  
  
    14.         sayName() {
      15. 
  
  
  
  
    15.             console.log(this.name)
      16. 
  
  
  
  
    16.         }
      17. 
  
  
  
  
    17.     }
      18. 
  
  
  
  
    18. }
      19.

    深度监听在监听对象时，对象内部的属性被改变时无法触发 watch ，我们可以为其设置深度监听：

     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     data: {
      3. 
  
  
  
  
    3.         studen: {
      4. 
  
  
  
  
    4.             name: 'Joe',
      5. 
  
  
  
  
    5.             skill: {
      6. 
  
  
  
  
    6.                 run: {
      7. 
  
  
  
  
    7.                     speed: 'fast'
      8. 
  
  
  
  
    8.                 }
      9. 
  
  
  
  
    9.             }
      10. 
  
  
  
  
    10.         }
      11. 
  
  
  
  
    11.     },
      12. 
  
  
  
  
    12.     watch: {
      13. 
  
  
  
  
    13.         studen: {
      14. 
  
  
  
  
    14.             handler: 'sayName',
      15. 
  
  
  
  
    15.             deep: true
      16. 
  
  
  
  
    16.         }
      17. 
  
  
  
  
    17.     },
      18. 
  
  
  
  
    18.     methods: {
      19. 
  
  
  
  
    19.         sayName() {
      20. 
  
  
  
  
    20.             console.log(this.studen)
      21. 
  
  
  
  
    21.         }
      22. 
  
  
  
  
    22.     }
      23. 
  
  
  
  
    23. }
      24.

    2. 触发监听

    执行多个方法使用数组可以设置多项，形式包括字符串、函数、对象：

     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     data: {
      3. 
  
  
  
  
    3.         name: 'Joe'
      4. 
  
  
  
  
    4.     },
      5. 
  
  
  
  
    5.     watch: {
      6. 
  
  
  
  
    6.         name: [
      7. 
  
  
  
  
    7.             'sayName1',
      8. 
  
  
  
  
    8.             function(newVal, oldVal) {
      9. 
  
  
  
  
    9.                 this.sayName2()
      10. 
  
  
  
  
    10.             },
      11. 
  
  
  
  
    11.             {
      12. 
  
  
  
  
    12.                 handler: 'sayName3',
      13. 
  
  
  
  
    13.                 immaediate: true
      14. 
  
  
  
  
    14.             }
      15. 
  
  
  
  
    15.         ]
      16. 
  
  
  
  
    16.     },
      17. 
  
  
  
  
    17.     methods: {
      18. 
  
  
  
  
    18.         sayName1() {
      19. 
  
  
  
  
    19.             console.log('sayName1==>', this.name)
      20. 
  
  
  
  
    20.         },
      21. 
  
  
  
  
    21.         sayName2() {
      22. 
  
  
  
  
    22.             console.log('sayName2==>', this.name)
      23. 
  
  
  
  
    23.         },
      24. 
  
  
  
  
    24.         sayName3() {
      25. 
  
  
  
  
    25.             console.log('sayName3==>', this.name)
      26. 
  
  
  
  
    26.         }
      27. 
  
  
  
  
    27.     }
      28. 
  
  
  
  
    28. }
      29.

    文档：cn.vuejs.org/v2/api/#wat…

    watch监听多个变量

    watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象，再监听这个对象来实现“监听多个变量”

     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     data() {
      3. 
  
  
  
  
    3.         return {
      4. 
  
  
  
  
    4.             msg1: 'apple',
      5. 
  
  
  
  
    5.             msg2: 'banana'
      6. 
  
  
  
  
    6.         }
      7. 
  
  
  
  
    7.     },
      8. 
  
  
  
  
    8.     compouted: {
      9. 
  
  
  
  
    9.         msgObj() {
      10. 
  
  
  
  
    10.             const { msg1, msg2 } = this
      11. 
  
  
  
  
    11.             return {
      12. 
  
  
  
  
    12.                 msg1,
      13. 
  
  
  
  
    13.                 msg2
      14. 
  
  
  
  
    14.             }
      15. 
  
  
  
  
    15.         }
      16. 
  
  
  
  
    16.     },
      17. 
  
  
  
  
    17.     watch: {
      18. 
  
  
  
  
    18.         msgObj: {
      19. 
  
  
  
  
    19.             handler(newVal, oldVal) {
      20. 
  
  
  
  
    20.                 if (newVal.msg1 != oldVal.msg1) {
      21. 
  
  
  
  
    21.                     console.log('msg1 is change')
      22. 
  
  
  
  
    22.                 }
      23. 
  
  
  
  
    23.                 if (newVal.msg2 != oldVal.msg2) {
      24. 
  
  
  
  
    24.                     console.log('msg2 is change')
      25. 
  
  
  
  
    25.                 }
      26. 
  
  
  
  
    26.             },
      27. 
  
  
  
  
    27.             deep: true
      28. 
  
  
  
  
    28.         }
      29. 
  
  
  
  
    29.     }
      30. 
  
  
  
  
    30. }
      31.

    事件参数$event

    $event 是事件对象的特殊变量，在一些场景能给我们实现复杂功能提供更多可用的参数

    1. 原生事件

    在原生事件中表现和默认的事件对象相同：

     
 
 
 
      
  
  
  
  
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     methods: {
      3. 
  
  
  
  
    3.         inputHandler(msg, e) {
      4. 
  
  
  
  
    4.             console.log(e.target.value)
      5. 
  
  
  
  
    5.         }
      6. 
  
  
  
  
    6.     }
      7. 
  
  
  
  
    7. }
      8.

    2. 自定义事件

    在自定义事件中表现为捕获从子组件抛出的值

    my-item.vue：

     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     methods: {
      3. 
  
  
  
  
    3.         customEvent() {
      4. 
  
  
  
  
    4.             this.$emit('custom-event', 'some value')
      5. 
  
  
  
  
    5.         }
      6. 
  
  
  
  
    6.     }
      7. 
  
  
  
  
    7. }
      8. 
  
  
  
  
    8. 复制代码
      9.

    App.vue：

     
 
 
 
      
  
  
  
  
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     methods: {
      3. 
  
  
  
  
    3.         customEvent(index, e) {
      4. 
  
  
  
  
    4.             console.log(e) // 'some value'
      5. 
  
  
  
  
    5.         }
      6. 
  
  
  
  
    6.     }
      7. 
  
  
  
  
    7. }
      8.

    文档：

    自定义组件双向绑定

    组件 model 选项：

    允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

    input 默认作为双向绑定的更新事件，通过 $emit 可以更新绑定的值

     
 
 
 
      
  
  
  
  
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     props: {
      3. 
  
  
  
  
    3.         value: {
      4. 
  
  
  
  
    4.             type: Boolean,
      5. 
  
  
  
  
    5.             default: false
      6. 
  
  
  
  
    6.         }
      7. 
  
  
  
  
    7.     },
      8. 
  
  
  
  
    8.     methods: {
      9. 
  
  
  
  
    9.         switchChange(val) {
      10. 
  
  
  
  
    10.             this.$emit('input', val)
      11. 
  
  
  
  
    11.         }
      12. 
  
  
  
  
    12.     }
      13. 
  
  
  
  
    13. }
      14.

    修改组件的 model 选项，自定义绑定的变量和事件

     
 
 
 
      
  
  
  
  
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     model: {
      3. 
  
  
  
  
    3.         prop: 'num',
      4. 
  
  
  
  
    4.         event: 'update'
      5. 
  
  
  
  
    5.     },
      6. 
  
  
  
  
    6.     props: {
      7. 
  
  
  
  
    7.         value: {
      8. 
  
  
  
  
    8.             type: String,
      9. 
  
  
  
  
    9.             default: ''
      10. 
  
  
  
  
    10.         },
      11. 
  
  
  
  
    11.         num: {
      12. 
  
  
  
  
    12.             type: Number,
      13. 
  
  
  
  
    13.             default: 0
      14. 
  
  
  
  
    14.         }
      15. 
  
  
  
  
    15.     },
      16. 
  
  
  
  
    16.     methods: {
      17. 
  
  
  
  
    17.         numChange() {
      18. 
  
  
  
  
    18.             this.$emit('update', this.num++)
      19. 
  
  
  
  
    19.         }
      20. 
  
  
  
  
    20.     }
      21. 
  
  
  
  
    21. }
      22.

    文档：cn.vuejs.org/v2/api/#mod…

    监听组件生命周期

    通常我们监听组件生命周期会使用 $emit ，父组件接收事件来进行通知

    子组件：

     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     mounted() {
      3. 
  
  
  
  
    3.         this.$emit('listenMounted')
      4. 
  
  
  
  
    4.     }
      5. 
  
  
  
  
    5. }
      6.

    父组件：

     
 
 
 
      
  
  
  
  
      2.

    其实还有一种简洁的方法，使用 @hook 即可监听组件生命周期，组件内无需做任何改变。同样的， created 、 updated 等也可以使用此方法。

     
 
 
 
      
  
  
  
  
      2.

    程序化的事件侦听器

    比如，在页面挂载时定义计时器，需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在 beforeDestroy 内取到计时器序号，除此之外没有任何用处。

     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     mounted() {
      3. 
  
  
  
  
    3.         this.timer = setInterval(() => {
      4. 
  
  
  
  
    4.             console.log(Date.now())
      5. 
  
  
  
  
    5.         }, 1000)
      6. 
  
  
  
  
    6.     },
      7. 
  
  
  
  
    7.     beforeDestroy() {
      8. 
  
  
  
  
    8.         clearInterval(this.timer)
      9. 
  
  
  
  
    9.     }
      10. 
  
  
  
  
    10. }
      11.

    如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。

    我们可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题：

     
 
 
 
      
  
  
  
  
    1. export default {
      2. 
  
  
  
  
    2.     mounted() {
      3. 
  
  
  
  
    3.         this.creatInterval('hello')
      4. 
  
  
  
  
    4.         this.creatInterval('world')
      5. 
  
  
  
  
    5.     },
      6. 
  
  
  
  
    6.     creatInterval(msg) {
      7. 
  
  
  
  
    7.         let timer = setInterval(() => {
      8. 
  
  
  
  
    8.             console.log(msg)
      9. 
  
  
  
  
    9.         }, 1000)
      10. 
  
  
  
  
    10.         this.$once('hook:beforeDestroy', function() {
      11. 
  
  
  
  
    11.             clearInterval(timer)
      12. 
  
  
  
  
    12.         })
      13. 
  
  
  
  
    13.     }
      14. 
  
  
  
  
    14. }
      15.

    使用这个方法后，即使我们同时创建多个计时器，也不影响效果。因为它们会在页面销毁后程序化的自主清除。

    文档：cn.vuejs.org/v2/guide/co…

    手动挂载组件

    在一些需求中，手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件，最理想的用法是通过命令式调用，就像 elementUI 的 this.$message 。而不是在模板中通过状态切换，这种实现真的很糟糕。

    先来个最简单的例子：

     
 
 
 
      
  
  
  
  
    1. import Vue from 'vue'
      2. 
  
  
  
  
    2. import Message from './Message.vue'
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. // 构造子类
      5. 
  
  
  
  
    5. let MessageConstructor = Vue.extend(Message)
      6. 
  
  
  
  
    6. // 实例化组件
      7. 
  
  
  
  
    7. let messageInstance = new MessageConstructor()
      8. 
  
  
  
  
    8. // $mount可以传入选择器字符串，表示挂载到该选择器
      9. 
  
  
  
  
    9. // 如果不传入选择器，将渲染为文档之外的的元素，你可以想象成 document.createElement()在内存中生成dom
      10. 
  
  
  
  
    10. messageInstance.$mount()
      11. 
  
  
  
  
    11. // messageInstance.$el获取的是dom元素
      12. 
  
  
  
  
    12. document.body.appendChild(messageInstance.$el)
      13.

    下面实现一个简易的 message 弹窗组件

    Message/index.vue：

     
 
 
 
      
  
  
  
  
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. // 默认选项
      2. 
  
  
  
  
    2. const DefaultOptions = {
      3. 
  
  
  
  
    3.     duration: 1500,
      4. 
  
  
  
  
    4.     type: 'info',
      5. 
  
  
  
  
    5.     content: '这是一条提示信息！',
      6. 
  
  
  
  
    6. }
      7. 
  
  
  
  
    7. let mid = 0
      8. 
  
  
  
  
    8. export default {
      9. 
  
  
  
  
    9.     data() {
      10. 
  
  
  
  
    10.         return {
      11. 
  
  
  
  
    11.             notices: []
      12. 
  
  
  
  
    12.         }
      13. 
  
  
  
  
    13.     },
      14. 
  
  
  
  
    14.     methods: {
      15. 
  
  
  
  
    15.         add(notice = {}) {
      16. 
  
  
  
  
    16.             // name标识 用于移除弹窗
      17. 
  
  
  
  
    17.             let _name = this.getName()
      18. 
  
  
  
  
    18.             // 合并选项
      19. 
  
  
  
  
    19.             notice = Object.assign({
      20. 
  
  
  
  
    20.                 _name
      21. 
  
  
  
  
    21.             }, DefaultOptions, notice)
      22. 
  
  
  
  
    22. 
  
  
  
  
    23.             this.notices.push(notice)
      24. 
  
  
  
  
    24. 
  
  
  
  
    25.             setTimeout(() => {
      26. 
  
  
  
  
    26.                 this.removeNotice(_name)
      27. 
  
  
  
  
    27.             }, notice.duration)
      28. 
  
  
  
  
    28.         },
      29. 
  
  
  
  
    29.         getName() {
      30. 
  
  
  
  
    30.             return 'msg_' + (mid++)
      31. 
  
  
  
  
    31.         },
      32. 
  
  
  
  
    32.         removeNotice(_name) {
      33. 
  
  
  
  
    33.             let index = this.notices.findIndex(item => item._name === _name)
      34. 
  
  
  
  
    34.             this.notices.splice(index, 1)
      35. 
  
  
  
  
    35.         }
      36. 
  
  
  
  
    36.     }
      37. 
  
  
  
  
    37. }
      38. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. .wrap {
      2. 
  
  
  
  
    2.     position: fixed;
      3. 
  
  
  
  
    3.     top: 50px;
      4. 
  
  
  
  
    4.     left: 50%;
      5. 
  
  
  
  
    5.     display: flex;
      6. 
  
  
  
  
    6.     flex-direction: column;
      7. 
  
  
  
  
    7.     align-items: center;
      8. 
  
  
  
  
    8.     transform: translateX(-50%);
      9. 
  
  
  
  
    9. }
      10. 
  
  
  
  
    10. 
  
  
  
  
    11. .message {
      12. 
  
  
  
  
    12.     --borderWidth: 3px;
      13. 
  
  
  
  
    13.     min-width: 240px;
      14. 
  
  
  
  
    14.     max-width: 500px;
      15. 
  
  
  
  
    15.     margin-bottom: 10px;
      16. 
  
  
  
  
    16.     border-radius: 3px;
      17. 
  
  
  
  
    17.     box-shadow: 0 0 8px #ddd;
      18. 
  
  
  
  
    18.     overflow: hidden;
      19. 
  
  
  
  
    19. }
      20. 
  
  
  
  
    20. 
  
  
  
  
    21. .content {
      22. 
  
  
  
  
    22.     padding: 8px;
      23. 
  
  
  
  
    23.     line-height: 1.3;
      24. 
  
  
  
  
    24. }
      25. 
  
  
  
  
    25. 
  
  
  
  
    26. .message.info {
      27. 
  
  
  
  
    27.     border-left: var(--borderWidth) solid #909399;
      28. 
  
  
  
  
    28.     background: #F4F4F5;
      29. 
  
  
  
  
    29. }
      30. 
  
  
  
  
    30. 
  
  
  
  
    31. .message.success {
      32. 
  
  
  
  
    32.     border-left: var(--borderWidth) solid #67C23A;
      33. 
  
  
  
  
    33.     background: #F0F9EB;
      34. 
  
  
  
  
    34. }
      35. 
  
  
  
  
    35. 
  
  
  
  
    36. .message.error {
      37. 
  
  
  
  
    37.     border-left: var(--borderWidth) solid #F56C6C;
      38. 
  
  
  
  
    38.     background: #FEF0F0;
      39. 
  
  
  
  
    39. }
      40. 
  
  
  
  
    40. 
  
  
  
  
    41. .message.warning {
      42. 
  
  
  
  
    42.     border-left: var(--borderWidth) solid #E6A23C;
      43. 
  
  
  
  
    43.     background: #FDF6EC;
      44. 
  
  
  
  
    44. }
      45.

    Message/index.js：

     
 
 
 
      
  
  
  
  
    1. import Vue from 'vue'
      2. 
  
  
  
  
    2. import Index from './index.vue'
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. let messageInstance = null
      5. 
  
  
  
  
    5. let MessageConstructor = Vue.extend(Index)
      6. 
  
  
  
  
    6. 
  
  
  
  
    7. let init = () => {
      8. 
  
  
  
  
    8.     messageInstance = new MessageConstructor()
      9. 
  
  
  
  
    9.     messageInstance.$mount()
      10. 
  
  
  
  
    10.     document.body.appendChild(messageInstance.$el)
      11. 
  
  
  
  
    11. }
      12. 
  
  
  
  
    12. 
  
  
  
  
    13. let caller = (options) => {
      14. 
  
  
  
  
    14.     if (!messageInstance) {
      15. 
  
  
  
  
    15.         init(options)
      16. 
  
  
  
  
    16.     }
      17. 
  
  
  
  
    17.     messageInstance.add(options)
      18. 
  
  
  
  
    18. }
      19. 
  
  
  
  
    19. 
  
  
  
  
    20. export default {
      21. 
  
  
  
  
    21.     // 返回 install 函数 用于 Vue.use 注册
      22. 
  
  
  
  
    22.     install(vue) {
      23. 
  
  
  
  
    23.         vue.prototype.$message = caller
      24. 
  
  
  
  
    24.     }
      25. 
  
  
  
  
    25. }
      26.

    main.js：

     
 
 
 
      
  
  
  
  
    1. import Message from '@/components/Message/index.js'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. Vue.use(Message)
      4.

    使用：

     
 
 
 
      
  
  
  
  
    1. this.$message({
      2. 
  
  
  
  
    2.     type: 'success',
      3. 
  
  
  
  
    3.     content: '成功信息提示',
      4. 
  
  
  
  
    4.     duration: 3000
      5. 
  
  
  
  
    5. })
      6.

    文档：cn.vuejs.org/v2/api/#vm-…

    网站名称：10个Vue开发技巧
    转载源于：http://www.shufengxianlan.com/qtweb/news30/412680.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    面包屑导航知识

    各行业网站

    网络营销公司　　 　成都建网站　　 　什邡网站建设　　 　租用服务器　　 　四川成都网站建设　　 　绵阳电信机房　　 　四川国泰民安消防　　 　成都力比特　　 　成都商城app开发　　 　注册域名　　 　宣传册设计　　 　乐山网站建设　　 　成都定制网站　　 　郫县明安消防器材　　 　江油网站建设　　 　东电技改　　 　成都小程序制作　　 　帝美豪门窗　　 　四川艺考培训　　 　LOGO设计