【review】vue 组件

vue  组件
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
例如 data、computed、watch、methods 以及生命周期钩子等。
仅有的例外是像 el 这样根实例特有的选项。
组件可以进行进行任意次数的复用
使用 v-bind 来动态传递 prop
通过 v-on 监听子组件实例的任意事件，同时子组件可以通过调用内建的 $emit 方法触发该事件

close(){
	this.$emit('closeCollectRecordInfo'); //子组件调用父组件方法
	this.operForm = {}
},

使用 $emit 的第二个参数来抛出返回值
Vue 自定义的 <slot> 元素使得组件里面还可以显示节点
通过 Vue 的 <component> 元素加一个特殊的 is 特性实现不同组件得绑定

Vue.component("",{}); // 组件全局注册

 

// CollectRecordInfo.vue 组件编写
<template></template>
<style lang="scss"></style>
<script>
    export default {
        props:[],//通过 Prop 向子组件传递数据
        data(){}, // data 必须是函数  没有 el选项
        computed:{},
        watch:{},
        methods:{},
    }
</script>

//  main.vue 主页面
// .vue 组件编写
<template>

// 组件调用
<!-- vue 组件  import  components注入 -->
<CollectRecordInfo ref="collectRecordInfo"
                   :flag="compshowFlag"
                   @closeCollectRecordInfo="compshowFlag =false"
                   @reload="reload"/>
                   
</template>
<style lang="scss"></style>
<script>
    import CollectRecordInfo from './components/collectRecordInfo'
    export default {
        name:'',
        components:{'CollectRecordInfo'} // 组件局部注册
        data(){}, // data 必须是函数  没有 el选项
        props:[],//通过 Prop 向子组件传递数据
        computed:{},
        created(){},// 通常用于初始化数据
        watch:{},
        methods:{},
    }
</script>

 

vue  ref
vue中的ref其实功能很强大
this.$refs.testDom // 获取页面中 dom 元素
this.$refs.hello.msg //标记组件，调用组件方法/data 

 

//详情
openCollectRecordInfo(data){
  //避免影响源数据
  let opt = Object.assign({},data);
  this.$refs.collectRecordInfo.initModel(opt); // 父组件调用子组件得方法
  this.compshowFlag = true;
},