框架扩展

Mixins是对父组件的扩充,Extend扩展组件的构造器

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>扩展</title>
        <script src="vue.js"></script>
    </head>

    <body>

        <!-- mixins 是对父组件的扩充,包括methods、components、directive等。。。
        触发钩子函数时,先调用mixins的函数,再调用父组件的函数。
        虽然也能在创建mixin时添加data、template属性,但当父组件也拥有此属性时以父为准,
        从这一点也能看出制作者的用心(扩充)。data、methods内函数、components和directives
        等键值对格式的对象均以父组件/实例为准 -->

        <!-- extend 扩展组件的构造器,extend创建的是一个组件构造器,而不是一个具体的组件,
            实例最终还是要通过Vue.components注册才可以使用的 -->

        <div id="app"></div>

        <script>
            
            
            //扩展属性和方法
            Vue.mixin({

                methods: {

                    getName: function() {

                        return '返回名字'
                    },

                    timer: function(sec, back) {

                        console.log('计时器启动成功')
                    }
                }
            })

            var vm = new Vue({

                el: '#app',

                created: function() {

                    this.timer()  
                }
            })
            
            

            //扩展组件
            var todoWarp = Vue.extend({
                template: `
                    <ul>
                        <todo-item 
                            v-for="(item, index) in todoData"
                            v-text="item.text"
                        ></todo-item>
                    </ul>
                `,
                props: {
                    todoData: {
                        type: Array,
                        default: []
                    }
                }
            })

            // 注册到全局
            Vue.component('todo', todoWarp)
            
            
        </script>

    </body>
</html>

对Vue原型直接进行扩展

Vue.prototype.$axios = axios;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • __阿里巴巴长期招聘Java研发工程师p6,p7,p8等上不封顶级别,有意向的可以发简历给我,注明想去的部门和工作...
    阿里加多阅读 6,542评论 5 13
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,039评论 3 119
  • #cooking dash# 提要: 餐厅厨师,为食客提供食物 逻辑: 做法敏捷类//// 松饼店,烤炸肉店,蛋糕...
    龙马菌阅读 1,943评论 0 0
  • 迎接每一个晨曦,带来的是全新回忆。好好珍惜每一天,能微笑就别抱怨。人生之路再苦再累,只要坚持往前走,属于你的风景终...
    健康快乐_5d6d阅读 1,241评论 0 1