Vue基础之组件

什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展

使用组件：

全局注册：要注册一个全局组件，你可以使用 Vue.component(tagName, options)

局部注册：不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用

data 必须是函数：

使用组件时，大多数选项可以被传入到 Vue 构造器中，有一个例外： data 必须是函数。 实际上，如果你这么做



那么 Vue 会在控制台发出警告，告诉你在组件中 data 必须是一个函数。最好理解这种规则的存在意义



由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！我们可以通过为每个组件返回新的 data 对象来解决这个问题

构成组件：

props：在子组件中通过props属性注册(比如注册一个仅仅包含一个值的数组),当在父组件中使用子组件的时候,可以在子组件的标签中添加一个属性,属性名就是通过props注册的数组中的那个唯一的值,然后给这个属性所添加的属性值就可以在子组件代码中通过’this.props数组中的值’的格式获取到从父组件中传递过来的值

在父组件中给子组件的props属性message传递的值，可以在子组件中被接收到，并展现在template模板中

camelCase vs. kebab-case:HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）

动态 Props：类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件

自定义事件：我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件

使用 v-on 绑定自定义事件：

每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

在组件树中通信，当在子组件中触发某个特定的自定义事件的时候，通过自定义事件接口将该事件和某些信息传递给父组件，从而在父组件中触发对应的自定义事件来展示从子组件中传递过来的信息(需要注意的是

'$on'

和

'$emit'

可以直接在父组件的标签中用’v-on:事件名称’来监听)

使用自定义事件的表单输入控件：

自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定



仅仅是一个语法糖



当用户触发input事件，输入新的value值的时候，动态的修改value属性的值

（未完）