4-1 组件使用的细节点

①在table标签中如何结合组件来使用?

一般不用组件时的写法如下:

改用组件的形式如下图:

 

//在控制台中显示的html代码如下:

 //虽然页面上显示的效果是正确的,但是在html代码中就出现错误了。这种写法会使table和tr处于同级的位置,使得html代码显得不规范。

//所以就需要用上  "is属性" 来解决这个问题!  如下:

 

//在控制台中显示如下:    这种写法就会避免刚才出现的bug,能够完整的显示页面效果和html的代码规范。

 //用is属性可以解决上面的问题,上面的代码表示为: 在tbody中需要用组件的方法来编写,但是又不能直接写这个组件,所以在tr标签中用is属性来表示使用的是row组件的方法!

//而且以后用ul,ol,select等标签来使用组件的话,也最好使用is属性来编写代码,这样会达到一个正确的效果!

 ==================================================

②在子组件定义data的规范写法:

错误写法:

在控制台显示如下:

//即:子组件的data属性不能用对象的形式来编写!!!

正确写法:

 

改为这样的写法,控制台中就不会报错了。

//总结:在根组件(即最外层的Vue实例)中定义data属性,用对象的形式是不会出错的。但在非根组件(即子组件)定义data的时候,data必须是一个函数的形式,而不能是一个对象。同时这个函数需要返回一个对象,这个对象要包含所对应的数据。通过一个函数来返回一个对象的目的,就是让每一个子组件都拥有一个独立的数据存储,这样就不会出现多个子组件之间的相互影响的情况

 ==================================================

③ref引用:

Vue不建议我们在代码里面操作DOM,但在处理一些极其复杂的动画效果,光靠Vue中的数据绑定处理不了,所以在有些必要的情况之下,就真的需要操作DOM

所以介绍一下——用ref引用的形式来进行DOM的操作:

//上图的代码,就可以实现ref引用获取DOM节点来实现点击触发事件的效果。

以下用ref引用结合组件的方式来举个案例:   计数器

//先编写如下代码,实现点击counter组件,number的值加一:

//运行结果如下图:    (每次点击,number值加一)

接下来,用ref实现计数器的方法。  定义一个div,实现上面两个number的值变化,div进行求和计算。

 //显示效果如下:

//总结:

当写在div标签的时候,通过this.$refs.名字,获取到的内容,实际上就是标签DOM对应的元素
当写在一个组件上,通过this.$refs.名字,获取到的内容,实际上就是子组件的引用

猜你喜欢

转载自www.cnblogs.com/ytraister/p/10583797.html
4-1