Vue的父子组件传值：props属性和emit的使用（绝对实用）

Props属性

类型： Array<string> | Object

作用：

     用于接收来自父组件的数据，它具有基于Array的简单语法和替代的基于对象的语法，允许高级配置，如类型检查，自定义验证和默认值。

• type：可以是下列构造函数之一：String，Number，Boolean，Array，Object，Date，Function，Symbol，任何定制构造函数或那些的阵列。将检查道具是否具有给定类型，如果不是，则将发出警告。
• default：any
  指定prop的默认值。如果未通过道具，则将使用此值。必须从工厂函数返回对象或数组默认值。
• required：Boolean
  定义是否需要道具。在非生产环境中，如果此值为真，并且未传递prop，则将引发控制台警告。
• validator：Function
  自定义验证器函数，将prop值作为唯一参数。在非生产环境中，如果此函数返回虚假值（即验证失败），则将抛出控制台警告。你可以阅读更多关于托验证这里。

Emit用法

    用于子组件通知父类组件，可以进行关闭的相关处理了。

实例：

父组件定义：

<el-dialog title="显示的标题" center :visible="dialogFormVisible" @open="onUserSetOpen()" width="600px" @close="closeShowList">

       <user-show-list :userId="userId" @closeUserAdd="closeShowList" ref="user-show-list"></user-show-list>

</el-dialog>

export default {

  data(){

        return{

             userId: ""

        }

   },

   method:{

       closeShowList(){ //用于监控子组件emit中的方法closeUserAdd或点击dialog的对话框时，用于关闭当前dialog 

          this.dialogFormVisible=false;

          this.search()

        },

        onUserSetOpen(){  // 此方法用于打开子组件时，可以调用子组件的方法进行初始化
            this.$nextTick(() => {
              let form = this.$refs["user-show-list"];
              form.initPage();  //此方法为子组件的方法，可以用于清空子组件的model中的值，也可以调用初始化方法
            });
      },

   }

}

子组件获取：

Vue.component('props-demo-advanced', {
  props: {
    // type check
    userId: Number,
    // type check plus other validations
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

########################

JS中的写法：

export default {
  props:["userId"], //接收到父id的属性，主要Vue是懒加载，如果不监控，此处不会获取不同的userId, 因此需要watch去监控

   watch: {
       'userId':{
         // 因为userID是值类型，所以每次都能监听到变化
          immediate:true,
          handler:function(val){
            if(!val) return;
            this.onUserIdChange(val);
          }
      }
  },
  data(){
    return{
    }
  },

  close(){ //点击该页面的“确定”或“取消”时调用

       this.$emit("closeUserAdd"); //用于通知父组件，此页面结束了，可以关闭了

  }
}

在ES6之后，TS+Vue的写法：

export default class UserRouter extends Vue {
  @Prop({ required: true })
  userId;

  @Emit("closeUserAdd")

   close(){}
}