这是封装组件
<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)