学习VUE第十一天课程（VUE之组件（绑定原生事件、$listeners、$ref））

た入场券 2023-06-11 03:22 20阅读 0赞

# VUE之组件（绑定原生事件、 l i s t e n e r s 、 listeners、 listeners、ref） #

![在这里插入图片描述][20191028204902338.png]

# 组件绑定原生事件 #

**有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下  
1、首先定义一个 child 组件，什么事件都不绑定，代码如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
**步骤：  
2、接下来，给 child 组件增加一个 @click 事件，如下所示**  
![在这里插入图片描述][20191028204937911.png]  
**3、这个 handleClick 方法是谁的呢？当然是父作用域下的方法，所以接下来在根组件中增加一个方法，代码如下**  
![在这里插入图片描述][20191028204945846.png]  
**分析验证：  
当点击按钮的时候发现，没有弹框提示，也就是说 handleClick 方法根本没有执行，究其原因，在于此时组件绑定事件等价于自定义事件。  
方案：  
通过 $emit 事件派发传递给父组件，代码如下所示：**  
![在这里插入图片描述][20191028205211874.png]  
![在这里插入图片描述][2019102820523190.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
**组件绑定原生事件：  
如上代码，在组件上绑定原生事件还需要自定义事件，过于麻烦。这个时候 .native 原生修饰符就派上用场了，代码如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]  
**.native 原生修饰符的官方解释是： 监听组件根元素的原生事件！**  
**接下来再看个案例，给组件根元素添加.native绑定原生事件（onblur失焦事件），即失焦时触发**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

# 组件绑定原生事件和$listeners #

**优化：  
为了提高用户体验，我们将根元素改为，调整如下**  
![在这里插入图片描述][20191028205719832.png]  
**验证后发现，此时原生事件不能被正常触发，即使用了.native也无效。  
所以根元素为时，原生事件不能再被绑定到input事件上。父级的 .native 监听器将静默失败。它不会产生任何报错，但是处理函数不会如你预期地被调用。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][20191028210054617.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][20191028210231427.png]

# 小结： #

**1、组件根元素添加.native表示绑定原生事件  
2、在开发里常通过props把构造器中data的值传递给组件，我们只要进行绑定就可以了，就是我们之前所介绍的v-bind:xxx  
3、构造器即平时所说的Vue实例**

# 基础扫盲 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][2019102821034848.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]  
**跨级组件传值通信  
假设第三层组件想和第一层组件进行通信  
1、(第一层组件向第三层组件传值)—禁止第一层直接传值到第三层，需要逐层传递，即1→2→3，此时便可以实现跨级组件向下通信  
2、(第三层组件向第一层组件传值)—通过触发自定义事件将数据传递至第二层，然后第二层通过事件触发传递至第一层，如此逐层传递，便可以实现跨级组件向上通信**  
![在这里插入图片描述][20191028210539806.png]  
![在这里插入图片描述][20191028210550550.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]

### 跨级向上通信： ###

**接下来测试下跨级向上通信**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]

### 跨级向上通信： ###

**接下来添加数据操作，因为单向数据流规定：后代组件不可以直接修改父组件传值，所以需要在后代组件里设置传值缓存，然后再事件回传.**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]

# 数据传递 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][20191028210822259.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][20191028210837683.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]  
![在这里插入图片描述][20191028210915158.png]  
![在这里插入图片描述][20191028210930144.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][20191028210942293.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][20191028211007262.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][20191028211045367.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][20191028211112860.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 20]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 21]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 22]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 23]

## 如有问题或者疑问请留言联系小编！！！！ ##

## 感谢来访！！！ ##

[20191028204902338.png]: /images/20230531/e92f15f347d8424a98add79a26c3c98d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/d433db924ddd4e70915044a921c2f953.png
[20191028204937911.png]: /images/20230531/1ef89243a7ea4128a3aea6cac5c2c6b7.png
[20191028204945846.png]: /images/20230531/93fbf7c999ad4d22b35c820602f063f6.png
[20191028205211874.png]: /images/20230531/0eee1312650c4a80aa886c2ee3239196.png
[2019102820523190.png]: /images/20230531/ca8a17f362d64e6bbdd4ae023a9f2814.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/a108fb317b1b4e49b6dcb6566011de71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/4cb8456f55d34fe6ad995d06d59db04a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/862109ace85542bb8c4d4558c8514a5a.png
[20191028205719832.png]: /images/20230531/9b665016319649bd8b2ddcc943ce7fd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/2a3f4b4458914291be1bba63d8f9979d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/4184c632bec24952840bcf70a902a1f4.png
[20191028210054617.png]: /images/20230531/95aab0d87bc643458c0efcbdd7f45856.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230531/46a59b19d22749288528ce842d2dc592.png
[20191028210231427.png]: /images/20230531/a4325df0328341ae801088af69c82824.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: /images/20230531/3f1d3c8f4e2f4d229da42929f152934f.png
[2019102821034848.png]: /images/20230531/15bdebfbd04643f2bde32ca0f8c62cca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: /images/20230531/d96fd4cdd7d64c7a9dfbab8ef150fcf4.png
[20191028210539806.png]: /images/20230531/4d5a6f89f84746d686af439f67033606.png
[20191028210550550.png]: /images/20230531/22f855b7374745fd871d967b41bca493.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: /images/20230531/77ecbd76b6b64fc097db2a81afab17f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: /images/20230531/327c30f255da46eeb830a8f8b7cafa51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: /images/20230531/bf49159519fa48f28352cac4db83becb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: /images/20230531/4c4d409bc1d74dcd80a61155f06396a1.png
[20191028210822259.png]: /images/20230531/850958282a5c45d99992a9039d79d638.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: /images/20230531/652b1e7290a04e79b76b41b00d33c993.png
[20191028210837683.png]: /images/20230531/59a5cf62d3c040f68e41a05783611935.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]: /images/20230531/f72fe62cdc9a4de28393daacfa4d56df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]: /images/20230531/1ab78421524d4babad146b4a13af5d63.png
[20191028210915158.png]: /images/20230531/93bea875b372444bb8d0ac4a0777d712.png
[20191028210930144.png]: /images/20230531/de9a7735d2904c5fa32cb56b6714b472.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]: /images/20230531/66005d4f7f8c4734b3aa352d55ec663a.png
[20191028210942293.png]: /images/20230531/eb95e233baff40d9baeb4342369c8a92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]: /images/20230531/ca6754f18dcf49b6aa2554a9a32233b5.png
[20191028211007262.png]: /images/20230531/483b2ff045da48b78f627e4f22f67925.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 18]: /images/20230531/2854c3c4839646ba8eb7612b1a87994a.png
[20191028211045367.png]: /images/20230531/d06c6388429746d3914edb9f8b2d7927.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 19]: /images/20230531/c2c0bc9385704f77938d4f6f550381f0.png
[20191028211112860.png]: /images/20230531/ec4d44c84ef843c0b50c182dc6a4c0f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 20]: /images/20230531/384509b9f02648469a2a2ea18a312b62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 21]: /images/20230531/59edc44ad6d9449e89f911100d9660d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 22]: /images/20230531/95780a454151401bb83fbd06c737d70f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 23]: /images/20230531/1c60bc77f3e940acb99451c68076623e.png