vue封装组件

父组件

<template>
   <view>
      <assembly @submitToParent="submitToParent">
         <template v-slot:content>
            <p>插槽内容</p>
        </template>
      </assembly>
   </view>
</template>

<script>
import assembly from "./component/assembly";
export default {

   data() {
      return {
         
      };
   },

   

   methods: {
      submitToParent(data){}
   },
   components:{
      assembly
   }
};
</script>

<style lang="less" >

</style>

 

子组件

 

<template>
   <view>
      <view>头部</view>
	  <!-- 定义插槽 -->
      <slot name="content"></slot>
	  
      <view>底部</view>
   </view>
</template>

<script>
export default {
	props:{
		A: Number,  // 基础类型检测 (`null` 意思是任何类型都可以)
		B: [String, Number，Array, Object，Boolean],   // 多种类型
		
		C: {  // 必传且是字符串
	      type: String,
	      required: true
		},
		
		D: {   // 数字，有默认值
		    type: Number,
		     default: 100
		},
		
		E: {   // 数组/对象的默认值应当由一个工厂函数返回
		  type: Object,
		  default: function () {
			return { message: 'hello' }
		  }
		},
		F: {   // 自定义验证函数
		  validator: function (value) {
			return value > 10
		  }
		}
	},
   data() {
      return {
         
      };
   },


   methods: {
      handleSubmit(data){
            this.$emit('submitToParent', data)
        }
   },
};
</script>

<style >

</style>