【Vue4】组件使用的细节点

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

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

在ul、ol、table、select这类html元素，它内部的元素是有严格限制的，诸如li、tr、option只能出现在某些特定的元素内部。

编写模板时

渲染在浏览器时

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

改写成这样

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

同样，使用ul、select、ol这类标签使用对应的标签，然后用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.one和 this.$refs.two来使用这两个组件，比如说图中，拿到的是这两个组件的 number进行相加，赋给父组件的 total。从而达到 total值的更改。

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

$emit传参

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

直接写在@click中