关于vue组件使用中的几个细节点

关于vue组件使用中的几个细节点

效果:关于vue组件使用中的几个细节点

每次点击数字,最后一行的总数就会自动求两个数字的和。

 

这个小例子中有两个注意的点

1.子组件里定义的“data” 必须是一个函数,因为要使每个子组件的data域都是独立的,而不是公用的。而new Vue()根实例中的“data”,可以是函数形式也可以是对象形式。

2. “ref”属性的使用,vm.$refs.定义的ref的名字,返回的是一个DOM节点,如上图vm.$refs.one返回的就是一个子组件。所以可以通过定义“ref”属性来获得DOM元素中的值。

PS:3. 使用“is”属性可以解决H5标签上的小bug

例子如下:

关于vue组件使用中的几个细节点   效果:  关于vue组件使用中的几个细节点

我们的本意是在table中插入三个row子组件,结果实际却是插在table上面,这是因为table中只能识别“tr”,无法识别“row”,此时解决办法是用“is”属性

如图:关于vue组件使用中的几个细节点       效果:关于vue组件使用中的几个细节点

这样就可以了,“tr”插入到正确的位置。