1,is的使用

正常情况下的table标签,table标签里面有tbody,tbody里面有tr,tr里面有td

组件使用中的细节点

现在我们想要用模板来显示tr以及tr里面的内容

组件使用中的细节点

组件使用中的细节点

发现模板跑到了table标签外面,并且和table同级这一层

这是因为在h5的规范里面说明,table里面必须放tbody,tbody里面必须要放tr,

我们现在在tbody里面放的row,那么当浏览器解析页面的时候就会出问题

解决方法:is

组件使用中的细节点

这段代码的意思是,我tbody里面只能放tr,那么我就放tr ,但是我们加了一个is=“row” 说明,虽然这是一个tr但是实际上这是一个row组件

组件使用中的细节点

组件使用中的细节点

这样就可以了

那么对于有序列表ol>li  ,  无序列表 ul>li  和select>option请别直接使用组件,使用is来标注组件的名字

2,子组件中的data表示

我们用组件中的数据来表示模板

组件使用中的细节点

这样子乍一看没什么问题

实际上,这是不行的

组件使用中的细节点

控制台报错说,data必须是一个函数,而不是一个对象

这是因为我们在根组件里面使用data来定义数据是没有问题的,但是当我们在非根组件里面就不能直接使用对象来定义数据

组件使用中的细节点

我们只能通过data定义为一个函数,然后让函数返回一个对象

组件使用中的细节点

之所以这样设计是因为子组件不像根组件只调用一次,子组件可能在页面的多个位置都有调用,那么我们现在想要每一个子组件都有一个自己数据,不希望和其他的子组件产生冲突

3,Vue中的ref 引用

组件使用中的细节点

组件使用中的细节点

一般来说,vue不希望我们直接操作dom,而是通过数据得变化来操作dom,但是有时候在处理相对复杂的动画情况的时候,我们不可免的要去操作dom,那么,在Vue中怎么样才能操作dom呢

组件使用中的细节点

我们给要操作的dom元素div加一个ref属性,名字为hello,然后在methods方法中,输出dom元素,this.$refs指的的整个Vue实例里面全部的引用,this.$refs.hello 指的是实例中所有引用里面有一个名字为hello的引用

组件使用中的细节点

返回的就是hello对应的节点

我们现在是在一个div标签上添加一个ref,那么通过this.$refs获得的就是一个dom元素

如果我们在一个组件上添加一个ref,那么通过this.$refs获得的就是一个组件的引用

组件使用中的细节点

组件使用中的细节点

点击数字之后, 数字都会自己加1

组件使用中的细节点

组件使用中的细节点

点击数字,两个数字就会相加并显示到第三行

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-30
  • 2021-12-13
  • 2022-12-23
  • 2021-05-08
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-10-13
  • 2021-11-01
  • 2021-10-29
  • 2021-09-17
  • 2021-12-15
  • 2022-12-23
相关资源
相似解决方案