vue的部分基础组件

组件的基础

# 组件基础

## 什么是组件

>对我们的页面中的共用的元素,进行拆分,单独做成一个模块,方便后续的使用,这个模块,我们就可以叫做 组件。

组件也是我们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 里面某个位置写上这个就是 vue 中默认给我们提供的一个内置组件。

1.组件的引用

   

   

   

   Document

   

       

       

       

       

   

2.props 传参

   

       

       

       

       



   

2.自定义事件

   

       

           :key="index":name="item"@yyy='fn1'>

   

3.组件之间的通信

   

       

   

4.v-model 的简单应用

   

       

       

   


5.solt内容分发

   

       

           听说加上了slot就可以在组件标签内写东西了????

       

   

6.动态组件

   

       

       :key="index"

       :style="{'color':curTab===item.id?'red':'blue '}"

       @click="curTab=item.id">

            {{item.name}}

       

       

           

           

       

   

你可能感兴趣的:(vue的部分基础组件)