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

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

正确的写法如下:

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

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

会报错:

正确写法:

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

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

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

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

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

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

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

 

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

给组件绑定原生事件

 

通过native修饰符

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

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

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

在组件内使用插槽:

具名插槽

作用域插槽

 

 动态组件:

原文地址:https://www.cnblogs.com/rmty/p/10991490.html