Vue中封装组件步骤

<template>  
  <div class="app_module"> 
       <div class="text">我是组件内容哦！</div> 
 <el-button @click="click" type="primary" style="margin:30px">发送组件信息到父组件</el-button>
   </div></template>
<script>   
 export default({  
      data(){      
      return{  
 message: '我是来自子组件的消息'    
      }    
    } , 
  created(){     
   },     
   methods:{       
       click() {      
            //1、childFn 组件方法名，父组件中用childFn方法接收子组件中的数据；
            //2、message是传递给父组件的数据  
          this.$emit('childFn', this.message);    
    }      
  } 
 })
</script>
<style scoped> 
   .text{      
      height:100px;   
      width:500px;    
     background:pink; 
   }
</style>

<template> 
<div>  
  <!-- 组件以标签形式使用 -->  
  <moduleContent @childFn="parentFn"></moduleContent> 
   <div>{{message}}</div>

   </div>
</template>
<script>
import moduleContent from "../../components/moduleContent"  //引入组件
export default({ 
 components:{moduleContent},  //注册组建 
data(){   
 return {   
  message: ''
 } 
 },
 created(){  
},  
methods:{  
  parentFn(childData) {   
   console.log(childData)//接收到的子组件传过来的值  
      this.message = childData;   
   } 
 }
})

</script>
<style scoped> 
 </style>