【Vue4】组件使用的细节点

组件使用的细节点,不是讲组件化,不是讲组件化,不是讲组件化。重要的事情说三遍,罒ω罒本来觉得这个自己看一遍就算了,但是越看到后面还是觉得有记录下来的必要。(其实官网都有,大家认真看官网文档,都能看得到,我记录下来的原因是大部分的视频教程可能都只教基本的模板指令,然后其他的就一带而过,所以有的人很容易忽略它们)

使用is 解决标签渲染中出现的小bug

uloltableselect这类html元素,它内部的元素是有严格限制的,诸如litroption只能出现在某些特定的元素内部。

编写模板时

渲染在浏览器时

正常来说3个tr应该在tbody里,但是却跑到外面去了,在H5的规范里,要求tbody里面必须放tr,而这里面我们写成了row,所以浏览器解析就出了问题。这个时候,我们就可以用is属性来解决这个问题。

改写成这样

既能解决tbody里是tr的问题,又能把row组件渲染上去。

同样,使用ulselectol这类标签使用对应的标签,然后用is来标注组件名。

非根组件data必须是个函数而不是对象

子组件定义data

这样写会报错,说data必须是个函数。

报错啦

在根组件内,这样定义data,不会有任何问题。

根组件定义data

但是子组件必须得定义成函数,同时要return对象,这个对象要包含所定义的数据。
子组件data正常的定义

之所以这样定义,是因为子组件不像根组件只被调用一次,每个子组件都应该有自己的数据,不和别的数据产生冲突,不是共享一套数据。通过函数返对象的目的,就是让每一个子组件都拥有独立的数据存储。

ref 引用

Vue不建议操作DOM,但是在某些复杂的动画效果还必须得操作DOM

先用ref标识这个DOM

用$refs来引用

this.$refs.hello的意思是,整个Vue实例中的所有引用中的hello这个引用,对应DOM被标识的那个hello引用。 这样也就拿到了那个DOM节点。

上面获取DOM节点是在一个div标签上写ref。如果在组件上写ref呢?获取到的是这个组件的引用。

根组件引用它们

组件处用ref标识

这里涉及到子组件向父组件派发事件。
在子组件内,用$emit向父组件派发一个事件,然后通过@(v-on)来监听这个事件,就像监听一个原生DOM事件一样。
然后再去父组件的方法(methods)内编写这个监听函数,也就是handleChange,然后再通过this.$refs.onethis.$refs.two来使用这两个组件,比如说图中,拿到的是这两个组件的number进行相加,赋给父组件的total。从而达到total值的更改。

关于$emit在官网上还有使用方法,这里贴出官网的图来。

$emit传参

$emit不仅仅可以放在methods里写,可以直接写在@click=里。

直接写在@click中

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容