VUE组件

Vue.js 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

组件语法

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

全局组件 技术就是Vue.component(tagName,options)  局部组件 就是在new Vue里面写

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

 

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

 

 

 点一下 就会+1

组件复用

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

 

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

prop

通过prop向子组件传递数据

<div id="app">
    <child message="hello!"></child>
</div>//要在实例中使用组件，组件的自定义元素才有用
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

 

动态prop

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

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>
 
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

prop验证

组件可以为 props 指定验证要求。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。

 

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // required声明是否必填
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字，未传参时，使用默认值
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

 

type能够指定的类型

type可以是以下原生类型：

String

Number

Boolean

Function

Object

Array

Symbol

Vue的props校验只是提供一个参考，并不是强制性的。还是会被渲染出来

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

 

步骤详细解释

步骤1：
大家先看到这里，其实在步骤4里面的自定义标签经过渲染之后是变成了如 步骤1一样的代码，所以我们应该从这里入手理解父子组件间事件绑定。在子组件里面把点击事件（click）绑定给了函数increment（即图片里面的步骤1），这里容易理解，即点击了子组件的按钮将会触发位于子组件的increment函数

步骤2与步骤3：
increment函数被触发执行，在步骤2里面执行了一句调用函数的语句

this.$emit('increment')

我们来看一下文档

vm.$emit( event, […args] ) ： 触发当前实例上的事件。附加参数都会传给监听器回调

在这里是什么意思呢？按我自己的大白话就是这样说的：
通过这句函数可以让父组件知道子组件调用了什么函数，this.$emit(‘increment’) 即类似于子组件跟父组件说了一声“hi，爸爸 我调用了我自己的increment函数”，通知父组件

步骤4：
回看一下在父组件里面定义的自定义标签，可以看到

v-on:increment="incrementTotal"
什么意思呢？我们还是用大白话来解释一下
就是说“孩子，当你调用了increment函数的时候，我将调用incrementTotal函数来回应你”

这时我们回想步骤3，在子组件我们已经使用emit来进行通知，所以，这样就形成父子组件间的相互呼应传递信息，其实在开发的过程中父子组件通讯也都是使用这样的方法，父组件传递信息给子组件的时候会通过props参数，通常不会直接在子组件中修改父组件传递下来的信息，而且通过这样的一个钩子去通知父组件对某些参数进行改变
步骤5 这样就容易理解了

另外button-counter 组件中的 data 不是一个对象，而是一个函数：

这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例

个人总结

 Vue.component（tagName,options）tagName为组件名 options为配置选项。注册后 可以使用<tagName></tagName>调用组件

Vue.component就是全局组件 局部组件就是写在new Vue里面，组件的data必须是一个函数。

prop向子组件传递数据  <tagName <数据名>=“...”></tagName>     props:['<数据名>']  props就可以把得到的值传给子组件

自定义事件 子组件传递数据给父组件 $on监听事件  $emit 触发事件，把子组件调用的函数，告诉父组件。可以触发父组件的V-on