Vue组件的创建和使用

一、创建vue组件项目

• 选择uni-app , 然后再选 uni-ui项目
• 创建完之后，打开index.vue文件，index.vue属于主页面(父组件)
  

---

二、创建子组件，并引入index.vue里面

• 再创建一个子组件页面,tanchukuang.vue ，可以引入index.vue主页面里面

等同于上面

---

三、创建删除按钮，弹出框的点击事件

1. 点击删除按钮会显示弹出框的内容
2. 点击弹出框里的“确定”会把删除按钮上面的内容删除掉、并且隐藏弹出框。
3. 点击弹出框里的“取消”会把弹出框隐藏起来

效果图：

---

四、在父子组件里面创建一个可抛可接收的事件

• 在子组件(tanchukuang.vue)创建一个事件，抛出去。
• 然后在父组件(index.vue)里创建一个，可以接收抛出去的事件。
  

---

插槽的添加方法：

插槽：

---

父组件：

<template>
	<view class="container">
		<view v-if="showData"> 我是一条可以被删除的数据
		</view>
		<button type="default" @click="toDel">删除</button>
		<tanchukuang v-if="showDelpopup" :content="title" @btn1Event="deleteData" @btn2Event="yincangData"> <!-- 接收抛出来的事件 -->

			<view slot="content">
				<