Vue组件学习笔记

组件用法

1. 全局注册

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

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

2. 局部注册

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

注意事项

html不分大小写，js区分大小写
自定义标签名称推荐小写和减号分割的形式书写
template的DOM结构必须被元素包裹，纯文本无法渲染
组件有时会受html的限制。像table内规定只允许<tr>,<td>,<th>,可以使用特殊的'is'属性来挂载。
<tbody is='my-component'></my-component>
组件跟实例一样带有data, methods, computed等属性
组件的data属性必须是函数, rutrun出数据(这样组件间的数据就是独立的)

使用props传递数据

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

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

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

<div id="app">
  <input type="text" v-model="parentmessage">
  <my-component :message="parentmessage"></my-component>
</div>
<script>
  var app = new Vue({
  el: '#app',
  data: {
    parentmessage: ''
  },
  components: {
    'my-component': {
      template: '<div>{{ message }}</div>',
      props: ['message']
    }
  }
})
</script>

注意：如果你要直接传递数字、布尔值、数组、对象，而且不使用 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
        }
    }
}

组件通信

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

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

示例

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

2. 使用v-model

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

• 接收一个 value属性

• 在有新的 value 时触发 input事件。

非父子组件通信

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

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

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

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

示例

父链

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

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

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

子组件索引

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