Vue在使用组件中的一些需要记住的点

约定不等于承诺〃 2021-12-21 05:51 263阅读 0赞

1.这样的写法会因为HTML的规则tbody里只能有tr，td标签而解析错误

![1693641-20190608192934894-328125780.png][]

正确的写法如下：

![1693641-20190608193046679-1139641634.png][]

同理select下也只能有option,ul里只能有li，要使用组件也可以使用类似的方法

2.子组件需要绑定数据情况需要把数据作为一个函数返回

会报错：

![1693641-20190608193303102-826550033.png][]

正确写法：

![1693641-20190608193409718-1879135864.png][]

3.使用ref可以获取到VUE实例下面的DOM元素

![1693641-20190608194007085-1833714640.png][]

组件通过emit向父组件传递数据，父组件通过$refs获取到子组件下面的值，具体实例如下:

![1693641-20190608195023112-457404033.png][]

接下来来几个传值的案例：

父组件通过属性的形式向子组件传值：

![1693641-20190610112546001-1293035396.png][]

父子间可以向父组件传递参数，子组件则不可以修改父组件传递过来的值，以上DEMO虽然能实现累加效果，但是会报错

![1693641-20190610112742710-1532854350.png][]

因为这是一个单向数据流，传递过来的数据如果是一个引用类型的数据，子组件修改数据的话会影响其他组件

具体解决方法如下(子组件拷贝一份父组件值的副本)：

![1693641-20190610113200420-411586890.png][]

子组件通过事件的形式向父组件传递：

![1693641-20190610114104689-1080818377.png][]

给组件绑定原生事件

![1693641-20190610114801885-1758533799.png][]

通过native修饰符

![1693641-20190610115035062-1186233085.png][]

复杂情况非父子组件传值:比如下图，13之间的传值，33之间的传值

![1693641-20190610115523631-1764348631.png][]

解决这种复杂传值的方式可以使用vuex，或者发布订阅者模式（观察者模式）来解决非父子组件之间传值

以下就是使用订阅者模式来解决

![1693641-20190610120826434-1327460882.png][]

在组件内使用插槽:

![1693641-20190610121714270-491452414.png][]

具名插槽

![1693641-20190610122427970-214227089.png][]

作用域插槽

![1693641-20190610123145452-1887782907.png][]

动态组件：

![1693641-20190610124136400-1349034189.png][]

转载于:https://www.cnblogs.com/rmty/p/10991490.html

[1693641-20190608192934894-328125780.png]: /images/20211221/557df46c9c2e48cd9549a11e59b12a3e.png
[1693641-20190608193046679-1139641634.png]: /images/20211221/cd7961676c5a4d08b2b8fe5f5332b658.png
[1693641-20190608193303102-826550033.png]: /images/20211221/73f3921c6d5044cd8647209d0891bbd4.png
[1693641-20190608193409718-1879135864.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190608193409718-1879135864.png
[1693641-20190608194007085-1833714640.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190608194007085-1833714640.png
[1693641-20190608195023112-457404033.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190608195023112-457404033.png
[1693641-20190610112546001-1293035396.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610112546001-1293035396.png
[1693641-20190610112742710-1532854350.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610112742710-1532854350.png
[1693641-20190610113200420-411586890.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610113200420-411586890.png
[1693641-20190610114104689-1080818377.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610114104689-1080818377.png
[1693641-20190610114801885-1758533799.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610114801885-1758533799.png
[1693641-20190610115035062-1186233085.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610115035062-1186233085.png
[1693641-20190610115523631-1764348631.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610115523631-1764348631.png
[1693641-20190610120826434-1327460882.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610120826434-1327460882.png
[1693641-20190610121714270-491452414.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610121714270-491452414.png
[1693641-20190610122427970-214227089.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610122427970-214227089.png
[1693641-20190610123145452-1887782907.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610123145452-1887782907.png
[1693641-20190610124136400-1349034189.png]: https://img2018.cnblogs.com/blog/1693641/201906/1693641-20190610124136400-1349034189.png