Vue 组件开发总结

一.  全局组件

      注册全局组件后，允许我们在同一页面任意组件中使用。这里我们主要总结一下全局组件基本用法，注意事项及组件间传值，组件函数调用。

这里已一个模态窗口的组件为例：

1.  dialogComponent  组件（子组件）

     如下为实例代码 （这里的实例代码是 amd 规范，比较老的代码。）

// html 模板
var template_thml = '
    <div class="mask" v-show="dialogInfo.dialogShow" id="mskbg">\
      <div class="double-basePop basePop" v-show="dialogInfo.dialogShow">\
        <div class="popHd">\
          <span>温馨提示</span>\
          <a href="javascript:" class="close" @click="closeDialog">X</a>\
        </div>\
        <div class="popBd">\
          <p class="popTitle">{{dialogInfo.dialogMessage}}</p>\
          <div class="btnGroup">\
            <button type="button" class="btn btnMid btnWidth" @click="confirmClick">\
              <span>确定</span>\
            </button>\
            <button type="button" class="btn btnWidth btnCanle" @click="cancelClick">\
              <span>取消</span>\
            </button>\
          </div>\
        </div>\
      </div>\
    </div>';
 
  // 注册并构建全局组件
  // 1. 全局组件通过Vue.component 的构造函数来创建
  // 2. 第一个参数 dialogcomponent 为该组件的名称（使用时的组件标签名称，建议统一用小写命名）
  // 3. props:  在这里定义预接收的参数属性明 （注： 这里属性名必须时驼峰形式，在父组件中使用该组件时对应使用横杠链接 dialog-info）
  // 4. 如果父组件传给子组件的参数是一个对象，则子组件中对该对象中的属性值更新，会直接体现在视图更新上(这也是子组件与父组件数据通信，交互的一种方式)；
  // 5. 父组件可传递函数给子组件，子组件通过vue实例的$emit(父组件给子组件的函数名，给父组件的参数) 来执行父组件中的函数，从而达到与父组件通信及数据更新渲染的目的。
  var globalDialog = Vue.component("dialogcomponent", {
    template: template_thml,
    props: ['dialogInfo'],
    methods: {
      closeClick: function() {
        this.dialogInfo.dialogShow = false
      },
      confirmClick: function() {
        var self = this;
          self.dialogInfo.dialogShow = false
        if (!!self.dialogInfo.callback) {
            self.dialogInfo.callback(self.dialogInfo.callbackparams)
        }
      },
      cancelClick: function() {
        this.dialogInfo.dialogShow = false
      },
      closeDialog: function() {
        var self = this;
        self.$emit('handlerclosedialog', !this.dialogInfo.dialogShow)
      }
    }
  })
  return globalDialog;

  2. parentComponent 组件

    父组件使用上面定义的子组件代码实例：

1.  父组件模板；
2.  注意这里给子组件传值属性名的命名方式；
3.  @handlerclosedialog 这里的handlerclosedialog名是子组件里回调时需要统一的名称handlerclosedialog。 （另外建议小写命名； 这里为了简洁，我把回掉函数，及回调函数参数都放到了一个变量里）；
<div class="state-wrapper" id="app">
 <DialogComponent :dialog-info="dialogInfo" @handlerclosedialog="handlerCloseDialog"></DialogComponent>
</div>

 //1.  dialogInfo : 给子组件的参数
 //2.  showDialog : 为每个页面组件需要自己定义的，给到子组件的参数；
 //3.  showDialog:  为每次弹框，更新子组件参数的统一入口
 //4. handlerDeleteUploadeFile 函数需要使用弹框的触发操作。 它更新并设置自定义回调函数，及回调参数。
 var APP = new Vue({
      el: "#app",
      data: {
        dialogInfo: {
          dialogShow: false,
          dialogMessage: "",
          callback: null, // 弹层操作后的回调
          callbackparams: null // 对调函数参数
        }
     },
     methods: {
     showDialog: function(msg, callback, callbackparams) {
       this.dialogInfo.dialogMessage = msg || ""
       this.dialogInfo.dialogShow = true
       this.dialogInfo.callback = callback;
       this.dialogInfo.callbackparams = callbackparams
     },
     handlerDeleteUploadeFile: function(e) {
       var callback = this.deleteUploadeFile;
       var callbackparams = { e: e }
       this.showDialog("确定删除图片？", callback, callbackparams);
     },
   }
})

 

二. 局部组件