![0a40262cede9c9050e7756cd4c3d7ba6.png](https://i-blog.csdnimg.cn/blog_migrate/fa18de506e8c7af59b31935596c73b45.jpeg)
文章选自我的语雀专栏《不造点轮子你可能都不知道的前端技巧》,
如果你喜欢的话可以关注我的语雀专栏https://www.yuque.com/u548790/technique,或者关注我的官网https://www.chenshiyu.com.cn/
如果你不能忍受知乎糟糕的排版,请点击查看原文:https://www.yuque.com/u548790/technique/tfcley
![f33d6cc5b0b632d127d5383bff2a75e1.png](https://i-blog.csdnimg.cn/blog_migrate/5d52b3cc62d42078fb113440eaa918ba.jpeg)
涉及的组件:cascader组件(级联选择器);使用场景:在使用的时候会给父元素传一个selected,点击下面的列表,会动态的将选中的元素更新到input中。
前情提要
我们先看一下对该组件的最佳引入方式:
需要传入source(对应列表渲染的内容)和selected(选中的内容)。
demo.vue
![11a853dbe555b04dc0ea257b2f78f36c.png](https://i-blog.csdnimg.cn/blog_migrate/0f163c331c46a7e9f8904bde8a83ad95.jpeg)
代码实现
强调几个我们需要知道的点:
- 级联列表使用逻辑:点击列表的元素更新selected;
![4c9e546a8eb260358dd6ea986fd7f931.png](https://i-blog.csdnimg.cn/blog_migrate/a570909f9ae7f7ae79cdfcafd9a646d8.jpeg)
- 注意selected是我们传给<g-cascader>的,vue是不推荐直接更新prop传过来的元素的,所以我们是不可以直接在点击的时候更新this.selected;
- 所以,在点击的时候,我们需要将点击的元素this.$emit('update:selected', item)出去;
![5cc0451c6f2f10a386bbef4ba13f0d60.png](https://i-blog.csdnimg.cn/blog_migrate/27c97103ec2bbc037009047267c4aab2.jpeg)
这里的emit出去的名字格式必须是updated:xxx(这和我们要用的.sync的约定有关)
- 到最外层demo.vue监听update:selected事件
demo.vue文件
![d6a027b939e841da1c26bb19738e59cb.png](https://i-blog.csdnimg.cn/blog_migrate/04d12cf9b59ac409018823717a33ca0b.jpeg)
![02324e69b7bfeecdf372fd398b8a600d.png](https://i-blog.csdnimg.cn/blog_migrate/6f1865f0a52b37dd5e002e4d23b7279c.jpeg)
文章选自我的语雀专栏《不造点轮子你可能都不知道的前端技巧》,
如果你喜欢的话可以关注我的语雀专栏https://www.yuque.com/u548790/technique,或者关注我的官网https://www.chenshiyu.com.cn/
如果你不能忍受知乎糟糕的排版,请点击查看原文:https://www.yuque.com/u548790/technique/tfcley