如何使用Vue封装弹框组件

最新推荐文章于 2024-10-10 08:08:52 发布

原创最新推荐文章于 2024-10-10 08:08:52 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #封装组件

本文深入探讨Vue中封装组件的方法，重点讲解如何利用Slot机制传递数据，实现组件间的通信和自定义内容嵌入，通过实例展示如何创建可复用性强的组件。

这是封装组件

<template>
    <div class="dialog">
        <div class="dialog-box">
        	// 其调用的组件slot传值问题，没有的话是显示默认值
            <slot name="title">如果没传默认title</slot>
            <div class="dialog-content">
              <slot name="content">如果没传默认content</slot>
            </div>
            <div class="dialog-btns">
                <button @click="qd">确定</button>
                <button @click="qx">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import Bus from "../../utils/Bus"
export default {
  methods: {
    qd()
    {
     //确认按钮，这里使用this.$emit派发事件让其调用的组件触发事件
      this.$emit("qd")
      // Bus.$emit()
      //这里也可以使用Bus.$emit()在点击确认之前传送写什么数据
    },
    qx()
    {
    //取消按钮，这里使用this.$emit派发事件让其调用的组件触发事件
      this.$emit("qx")
    }
  }
}
</script>

样式自行模拟…

这是其调用的组件(父组件)

<template>
  <div>
	<p @click="save()">显示隐藏</p>
	<Dlog  
		v-show="flag"
		@qd="qd"
		@qx="qx"
		//:num="item.rate" 这里可以给封装的组件传数据，看需求了
	>
		// 这里可以使用slot去传数据
		<h1 slot="title">我是调用它的组件传来的标题</h1>
		<h1 slot="content">我是调用它的组件传来的内容</h1> -->
	</Dlog>
  </div>
</template>

<script>
import Dlog from "@/components/dlog"
import Bus from "../utils/Bus"
export default {
	components:{Dlog},
	data()
	{
		return{
			flag:false
		}
	},
	methods:{
		//显示隐藏，也可以在封装的组件中去写
		save(){
			this.flag=!this.flag
		},
		//获取数据，随便写的本地json
		getData()
		{
			this.$axios.get("http://localhost:9999/data.json").then((res)=>{
				console.log(res.data.token)
			})
		},
		// 点击确定 
		qd()
		{
			console.log('在调用他的组件上点击了确定按钮')
			this.flag=false
			//在调用的组件上请求接口
			this.getData();
			// 这里点击确认后 接收数据
			Bus.$on('name',res=>{
				console.log(res)
				this.$axios.get("https//www.baidu.com?name="+res)
			})
		},
		// 点击取消
		qx()
		{
			console.log('在调用他的组件上点击了取消按钮')
			this.flag=false
		}
	},
}
</script>

样式自行模拟

这里呢写的也比较简单，具体的话看代码需求了，毕竟没有需求，只能自己模拟去写
大体思路就是：
1.你想向用户暴露哪些属性 (props)
2.你想向用户暴露哪些事件，让用户监听来处理后续的业务 ($emit,@)
3.你想让用户嵌入哪些自定义的内容（slot）