Vue组件学习笔记

组件用法

全局注册

Vue.component('my-component', {
    //选项
})

缺点：权限太大，容错率低

局部注册

new Vue({
    el: '#app',
    components: {
        'my-component': {
            //选项
        }
    }
})

注意事项

html不分大小写，js区分大小写
自定义标签名称推荐小写和减号分割的形式书写
template的DOM结构必须被元素包裹，纯文本无法渲染
组件有时会受html的限制。像table内规定只允许,,,可以使用特殊的'is'属性来挂载。

组件跟实例一样带有data, methods, computed等属性
组件的data属性必须是函数, rutrun出数据(这样组件间的数据就是独立的)

使用props传递数据

在组件中，使用选项 props 来声明需要从父级接收的数据， props 的值可以是两种，一种是字
符串数组，一种是对象。

props 中声明的数据与组件 data 函数 return 的数据主要区别就是 props 的来自父级，而 data 中
的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板 template及计算属性 computed
和方法 methods 中使用。

有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令 v-bind
来动态绑定 props 的值，当父组件的数据变化时，也会传递给子组件。

注意：如果你要直接传递数字、布尔值、数组、对象，而且不使用 v-bind，传递的仅仅是字符串

单向数据流

Vue2.x 通过 props 传递数据是单向的了。这样的设计目的是尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。

父组件数据通过props传进来。子组件可以用data和computed维护一份相联系的数据而不必修改父数据

数据验证

props选项除了数组外，还可以是对象

props: {
    //选项有type（定义多个用数组）、defalut、required(布尔值)、验证函数
    propA: {
        type: [Number, String],
        defalut: true,
        required: true
    },
    propB: {
        validator: function(value){
            return value > 10
        }
    }
}

组件通信

组件关系可以分为父子、兄弟、跨级组件通信

子组件像父组件传递数据：

示例

使用自定义事件
子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件
使用v-model

实现这样一个具有双向绑定的 v-model组件要满足下面两个要求:

接收一个 value属性
在有新的 value 时触发 input事件。

非父子组件通信

在Vue. 2.x中，推荐使用一个空的Vue实例作为中央事件总线(bus)，也就是一个中介.(发布、订阅模式)

比如你需要租房子，你可能会找房产中介来登记你的需求，然后中介把你的信息发给满足要求的出租者，出租者再把报价和看房时间告诉中介，由中介再转达给你，整个过程中，买家和卖家并没有任何交流，都是通过中间人来传话的。

或者你最近可能要换房了，你会找房产中介登记你的信息，订阅与你找房需求相关的资讯，一旦有符合你的房子出现时，中介会通知你，并传达你房子的具体信息。

这两个例子中，你和出租者担任的就是两个跨级的组件，而房产中介就是这个中央事件总线 (bus) 。

示例

父链

在子组件中，使用this.$parent可以直接访问该组件的父实例或组件，父组件也可以通过this.$children访问它的所有子组件，而且可以递归向上或向下访问。

尽管Vue允许这样操作，但在业务中，子组件应该尽可能避免依赖父组件的数据。更不该主动修改它的数据。这样父子组件是紧耦合的。

理想状况下，只有组件能修改它的状态。父子组件最好还是通过props和 $emit$ 来通信

子组件索引

Vue提供了子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称