关于vue组件使用中的几个细节点
效果:
每次点击数字,最后一行的总数就会自动求两个数字的和。
这个小例子中有两个注意的点
1.子组件里定义的“data” 必须是一个函数,因为要使每个子组件的data域都是独立的,而不是公用的。而new Vue()根实例中的“data”,可以是函数形式也可以是对象形式。
2. “ref”属性的使用,vm.$refs.定义的ref的名字,返回的是一个DOM节点,如上图vm.$refs.one返回的就是一个子组件。所以可以通过定义“ref”属性来获得DOM元素中的值。
PS:3. 使用“is”属性可以解决H5标签上的小bug
例子如下:
效果:
我们的本意是在table中插入三个row子组件,结果实际却是插在table上面,这是因为table中只能识别“tr”,无法识别“row”,此时解决办法是用“is”属性
如图: 效果:
这样就可以了,“tr”插入到正确的位置。