组件的基础
# 组件基础
## 什么是组件
>对我们的页面中的共用的元素,进行拆分,单独做成一个模块,方便后续的使用,这个模块,我们就可以叫做 组件。
组件也是我们vue中一大特色。借鉴 react
-组件的定义(全局注册)
-data 必须是一个函数
-单个根元素
## 组件的使用
>将组件的名称,当作是一个 自定义的 html 元素来使用
1.当我们注册好**全局组件**,这个组件就可以在整个项目中的 new Vue 根实例dom上或者其余的组件上来使用
# Prop (传参)
>prop 是我们组件上需要的特性。可以由调用组件的地方传递下来。
1.在组件内部,使用 props 选项来定义好,我这个组件需要那些 “参数”。
2.调用组件的时候,在组件的标签上面,通过自定义的属性来写prop
# 自定义事件
# 组件上使用 v-model
# 插槽 slot 内容分发
# 动态组件
-解析 DOM 模板时的注意事项
## PS:
1.组件的名字不要与现有标签重名。
2.组件的 template 需要有 根元素,不能直接写 文本。
3.组件的 data 必须是一个 函数,在函数里面 return 一个对象。
4.组件的 template 必须有一个 根元素,且只能有一个根元素。
5.组件的 props 定义的时候,可以是 小写,也可是 驼峰命名的。使用的时候,
直接在 DOM 上是使用:
-小写 msg -> msg
-驼峰 isHun -> is-hun
在template模板里面使用:
-小写 msg -> msg
-驼峰 isHun -> isHun 也可以 is-hun
6.全局注册的组件,必须在 new vue 之前注册。
7.子组件不能修改父组件的数据,只能通过打招呼的形式。自定义事件。
8.props 是不允许修改的。。。。。。。。。。。
9.在我们DOM上面。调用组件的时候,不能直接 自闭合。。XHTML。 但是如果是在模板中template字符串模板中使用的话,就没有这个限制。。。。
# 组件之间的通信
-父 -> 子 prop
-子 -> 父 $emit 参数是通过 $event 接收的 ,如果需要多个参数,那么请做成对象的形式。。。
PS: 层级过深的时候,通信流程会很麻烦。这时有两种解决方法
1.通过 空的 Vue 实例对象。 在某个 绑定事件,在另一个位置 触发事件, 中央事件管理器
2.通过 状态管理器。。。。VUEX
# 在组件中如何使用v-model 并且数据是 props 传递过来的。
1.调用组件的时候,写 v-model .然后需要在 组件里面,使用 value 这个props
2.
3.
# slot
template 里面某个位置写上
1.组件的引用