目录
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master
2.封装ElementUI按钮,并且是带Hover提示的按钮
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master
大家根据上传历史进行查找你需要的代码
组件通信-$attrs与$listeners
1.基本结构
在src/pages/Communication/AttrsListenersTest/AttrsListenersTest.vue中:
效果:
2.封装ElementUI按钮,并且是带Hover提示的按钮
新建HintButton,里面放一个index.vue,这个文件用来封装按钮
2.1在父组件中引入HintButton
在src/pages/Communication/AttrsListenersTest/AttrsListenersTest.vue中:
2.2子组件内的结构
在src/pages/Communication/AttrsListenersTest/HintButton/index.vue中:
el-button里面我们什么都没写,原因是为了引入的是一个动态的,以后我们修改按钮的内容,页面按钮样式,或者icon会动态改变
效果:
3.$attrs获取父组件传递过来的props数据
在src/pages/Communication/AttrsListenersTest/AttrsListenersTest.vue中:
这回我们子组件接收父组件传递过来的参数,我们就不用props了,我们利用组件实例身上的一个属性$attrs也可以接收父组件传递给子组件的数据
在子组件中打印一下$attrs
在src/pages/Communication/AttrsListenersTest/HintButton/index.vue中:
我们没有打开// props:['title'],利用$attrs接收参数的时候,会发现参数全部接收到了
我们打开// props:['title'],利用$attrs接收参数的时候,会发现参数除了props接收的title,其他参数都被$attrs接收了
所以,这里可以总结为:对于子组件而言,父组件给的数据可以利用props接收,注意,如果子组件通过props接收的属性,在$attrs属性当中是获取不到的
因为我们需要封装ElementUI按钮,并且是带Hover提示的按钮
在src/pages/Communication/AttrsListenersTest/HintButton/index.vue中:
我们在el-button外面来一个a标签,因为a标签有一个title属性,就带有提示功能
效果:
4.$listeners获取父组件给子组件传递的自定义事件
这个时候我们想给按钮绑定一个点击事件,点击弹出一个666什么的,我们知道HintButton是一个组件,在组件身上写@click他就变成了自定义事件了,那我们这里利用前面这篇文章说的Vue项目中常见问题(67)组件通信-自定义事件深入_学无止境QAQ的博客-CSDN博客
@click.native其实是可以解决的,但是我们这里有另外的解决办法,所以我这样来演示:
在src/pages/Communication/AttrsListenersTest/AttrsListenersTest.vue中:
父组件绑定自定义事件
我们想给HintButton绑定单击事件 实际上是给el-button绑定单击事件
我们先看看$listeners身上有没有父组件传递过来的自定义事件,并且利用v-on来给el-button绑定单击事件
在src/pages/Communication/AttrsListenersTest/HintButton/index.vue中:
子组件中
打印发现:$listeners确实可以获取父组件给子组件传递的自定义事件
此时我们再点击一个按钮,会发现成功弹出了666
总结:
$listeners与$attrs(组件通信方式的一种)
他们两者都是组件实例的属性,可以获取到父组件给子组件传递的props与自定义事件