Vue父组件监听子组件调用删除模块(个性化页面设置会使用到)

子组件

<template><div><h4>Xiongdi</h4><button @click="aClick">删除父组件的D区块</button></div>
</template><script>
export default {name: "Xiongdi",methods: {aClick() {// 弹出删除alert("删除");//   告诉父组件触发了点击事件//   this.$emit("aClick");// 告诉父组件,并且传递参数this.$emit('aClick',{name:'虞上戒',phone:'18898836555'})},},
};
</script><style>
</style>

父组件

<template><div><!-- 接受子组件传递过来的事件 --><!-- 绑定删除 --><Xiongdi @aClick="deleteD" /><div ref="ttt" class="ttt"><div class="ooo"><p><a class="ppp">将被子组件删除</a></p></div></div></div>
</template><script scoped>
import Xiongdi from "../components/Xiongdi.vue";
export default {name: "Body",components: {Xiongdi,},methods: {// 传递过去子组件的方法// deleteD() {//   this.$refs.ttt.remove();// 传递过去子组件的方法 而且还接收参数deleteD(argssss) {// 在控制台中打印下把console.log(argssss);this.$refs.ttt.remove();},},
};
</script>
// 下面是样式不用看
<style scoped>
.ooo {display: flex;width: 100%;height: 400px;margin: 0; /*外边距*/padding: 0; /*内边距*/background-color: #000; /*背景颜色*/
}
.ppp {position: absolute; /*绝对对位*/top: 50%; /*距上部*/left: 50%;transform: translate(-50%, -50%); /*移动，根据X,Y轴*/width: 400px; /*宽*/height: 120px; /*高*/text-align: center; /*字体水平居中*/font-size: 45px; /*字体大小*/line-height: 120px; /*行高*/color: #fff;text-transform: uppercase; /*字体大写*/text-decoration: none; /*字体增加装饰：去除下划线*/font-family: sans-serif; /*非衬线体*/box-sizing: border-box; /*盒模型大小规则*/background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4,#f441a5,#ffeb3b,#03a9f4); /*渐变背景*/border-radius: 60px; /*边框圆角*/background-size: 400%; /*背景大小*/z-index: 1; /*层叠定位*/
}
a:hover {animation: animate 8s linear infinite alternate; /*动画: 名称 时间 线性 循环 播放完回退播放*/
}
@keyframes animate {0% {background-position: 0%; /*修改背景定位，实现渐变色炫光*/}50% {background-position: 100%;}100% {background-position: 0%;}
}
a::before {/*之前添加*/content: ""; /*内容*/position: absolute; /*绝对定位*/top: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/left: -5px;right: -5px;bottom: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/z-index: -1;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4,#f441a5,#ffeb3b,#03a9f4);border-radius: 40px;background-size: 400%;filter: blur(20px); /*过渡：模糊*/opacity: 0; /*透明度*/transition: 1s; /*过渡时间*/
}
a:hover::before {filter: blur(20px);opacity: 1;animation: animate 8s linear infinite; /*注意动画名称统一*/
}
</style>

Vue父组件监听子组件调用删除模块(个性化页面设置会使用到)相关推荐

Vue.js 之组件-监听子组件事件
1.监听子组件事件前面介绍了父组件如何通过 prop 向子组件传递数据,反过来,子组件如何向父组件通信呢? 在 Vue.js 中,这是通过自定义事件来实现的,子组件使用 $emit() 方法触发事件 ...
vue关于监听子组件接收从父组件传过来的动态值的问题
这几天开发时,发现了一个现象,当我想监听子组件接收的从父组件传过来的值得时候,watch不起作用,查了很多资料,大概的原因是因为watch监听得必须是第一次绑定得值,并且初始值发生了改变得时候才会监听 ...
【Flutter】监听滚动动作控制组件透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )
文章目录前言一.移除顶部状态栏空白二.帧布局组件三.透明度组件四.监听滚动事件五.完整代码示例六.相关资源前言在上一篇博客 [Flutter]Banner 轮播组件 ( flutte ...
HTML父页面监听子页面关闭并回调方法
1.方式一:父页面监听父页面中: //此处省略新窗口的设置参数var win = window.open("url", "name", "featu ...
jquery 监听td点击事件_VUE @hook浅析（监听子组件的生命周期钩子） - 古兰精
一.前言接触hook是从webhook开始接触的,webhook是git的一个扩展服务,可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL.通过这 ...
and desgin Vue页面,使用watch监视, ＜a-input＞内的值, 自动计算出填入框的值,用vue中watch监听input组件的变化
and desgin Vue页面,使用watch监视, <a-input>内的值, 自动计算出填入框的值 <a>------输入[税率]与[价税合计]------</a& ...
vue中无法监听到子组件的事件的问题
是因为在@getList 这样的写法,会在HTML里自动转换为getlist, 因此要想实现这种驼峰,需用下滑线连接,既get_list 转载于:https://www.cnblogs.com/alw ...
vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
vue中事件监听watch
vue中的watch实际上是用来监听vue实例中的数据变化. 监听String <template><div @click="stringClick">{{ ...

Vue父组件监听子组件调用删除模块(个性化页面设置会使用到)

Vue父组件监听子组件调用删除模块(个性化页面设置会使用到)相关推荐

最新文章

热门文章