二次封装u-popup 为子组件，父组件像子组件传值并显示u-popup

二次封装`u-popup`作为子组件通常是为了复用该弹出框功能，并允许父组件控制其显示内容和状态。在Vue这样的单向数据绑定框架中，你可以通过props（属性）将数据从父组件传递给子组件，而事件则用于父子间的通信。

下面是一个简单的步骤说明：

1. **创建子组件** (`UPopupChild.vue`)：

   <template>
     <div>
       <button @click="showPopup" v-bind:popup-data="parentData">{{ popupTitle }}</button>
       <u-popup :visible.sync="isShowing" :data="popupData">
         <!-- 子组件内容 -->
         <p>{{ dataContent }}</p>
       </u-popup>
     </div>
   </template>

   <script>
   export default {
     props: {
       parentData: {
         type: Object,
         required: true
       },
       popupTitle: {
         type: String,
         default: '点击我'
       }
     },
     data() {
       return {
         isShowing: false,
         dataContent: ''
       };
     },
     methods: {
       showPopup() {
         this.isShowing = true;
       }
     }
   }
   </script>

2. **在父组件中使用** (`ParentComponent.vue`)：

   <template>
     <UPopupChild :parentData="{ content: '这是来自父组件的内容' }" />
   </template>

   <script>
   import UPopupChild from './UPopupChild.vue';

   export default {
     components: {
       UPopupChild
     }
   }
   </script>

在这个例子中，`parentData` prop是父组件向子组件传递的数据，`popupTitle`则是动态标题。当用户点击按钮时，通过`sync`修饰符，`isShowing`的状态会被双向绑定，控制`u-popup`的显示隐藏。