• vue2笔记4 组件


    创建组件

    • 组件配置不能使用el,组件由vm管理
    • data必须写为函数形式,保证每个组件实例的data独立
    const student = Vue.extend({
       name:'student', // 可选,此名称会影响开发者工具中呈现的名称
       template: `
         <div>{{ name }}-{{ age }}</div>
       `,      
       data() {
            return {
                name: '',
                age: 0
            }
        }
    })
    

    简写

    const student = {}; //直接写配置项无需写Vue.extend
    

    注册使用组件

    推荐命名方式:连字符连接多个小写单词,使用脚手架可以支持首字母大写驼峰模式

    // 局部注册
    let vm = new Vue({
    	// 非脚手架环境下使用自闭合标签会导致bug
        template: `
          <student></student>,
          <student/>
        `,
        components: {
            student: student
        },        
    }).$mount('#root');
    // 全局注册
    Vue.component('student', student);
    

    组件嵌套

    组件配置内定义components注册子组件即可

    一般来说注册单独一个App组件作为根组件注册到vm

    组件构造函数

    • Vue.extend生成的组件对象是一个名为VueComponent的构造函数
    • Vue解析组件注册的标签时,执行 new VueComponent(options)创建组件实例对象
    • 每次调用Vue.extend都返回一个全新的VueComponent构造函数
    Vue.extend = function (extendOptions) {
        ...
        var Sub = function VueComponent (options) {
          this._init(options);
        };
        ...
        return Sub
      };
    }
    
    • 组件配置中,data函数,methods、watch、computed中的函数,this是VueComponent实例对象
    • new Vue配置中,data函数,methods、watch、computed中的函数,this是Vue实例对象
    • VueComponent.prototype.proto === Vue.prototype ,即组件实例对象可以访问到Vue原型上的属性,方法
  • 相关阅读:
    产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复。
    it人必进的几大网站
    可写可选dropdownlist(只测试过ie)
    Datatable转换为Json 的方法
    ref 和out的区别
    数据库事务
    Webservice 的安全策略
    【转】Zookeeper解析、安装、配置
    【转】activemq的几种基本通信方式总结
    【转】Java小应用:Eclipse中建立自己的类库,给不同的工程使用
  • 原文地址:https://www.cnblogs.com/luguojun/p/16132560.html
Copyright © 2020-2023  润新知