vue 组件搭建

cfMsgInfo.vue

import

import CfMsgInfo from './components/cfMsgInfo.vue'

组件注册

{
    name:'' 
    components: { CfMsgInfo}, // 局部组件注册
    data(){return{}},
    created(){},
    methods:{},
}

ref 用于标记  template 里的 dom
this.$emit('showInfoFlagAction'); //  emit 事件分发

 this.$emit('showInfoFlagAction');

this.$refs.cfMsgInfo.initModel(opt,status); // 组件调用

{
    methods:{
       editBtn(){
             this.$refs.cfMsgInfo.initModel(opt,status);// 调用 initModel()
        } 
    }
}

参数传递 v-bind
方法传递 v-on

<!--comp-->
<CfMsgInfo ref="cfMsgInfo"
		   :flag="showInfoFlag"
		   @reload ="getPenaltyRecordList"
		   @showInfoFlagAction="showInfoFlag = false"></CfMsgInfo>