一个菜鸟的互联网技术分享博客
您的位置: 主页 > vue使用组件的细节
advertisement

vue使用组件的细节

细节一:table、ul、select用渲染数据
平时我们在使用table时候一般都是table里面套tbody,tbody里面套tr,tr里面套td,如下图所示:

那么在vue中使用组件渲染数据呢,如下图所示:


输出结果如下所示:

内容是可以正常显示的,但是仔细观察下源码你会发现tr和td都在table外面,这是为什么呢?
原因:H5的规范里面table要有tbody,
tbody里面必须要有tr,然后我们源码里面用的是组件row,那么浏览器在解析代码的时候就会出问题了,就造成tr到table外面去了

解决方法:is
代码如下图所示:


效果图如下:

注:有时候ul里面不是用li而是用其他组件、select中不是用option
而是用其他组件。。。的时候某些浏览器也会出现类似的问题

细节二:子组件中定义data必须要是一个函数,不能是一个对象
如下图所示:


浏览器运行出来是空白的,并且是有报错的,如下图所示:

提示的就是:data应该是一个function函数
正确的代码如下所示:


zhangren.online
上一篇:使用vue全家桶高仿小米商城--路由按需加载优化
下一篇:vue中ref的使用

您可能喜欢

​vue使用组件的细节

​vue使用组件的细节

​Vue的生命周期及代码实例

​Vue的生命周期及代码实例

​安装Vue-cli爬坑

​安装Vue-cli爬坑

回到顶部