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