vue.js 2.0系列之 组件的使用

1.组件的创建

<template>
<!--vue2.0以上，创建组件时，模板中必须要有一个根元素-->
  <div >

  </div>
</template>

<script>
export default {
  //不直接使用引用变量的形式是为了避免这个组件在使用时不相互影响数据
  data () {
    return {       //把组件中使用的数据以函数返回值的形式返回
      usernameModel: '',
      passwordModel: '',
      errorText: ''
    }
  },
  computed: { //计算属性，当计算属性的只发生变化时，就会执行这个计算属性对应的函数
    userErrors () {
      let errorText, status
      if (!/@/g.test(this.usernameModel)) {
        status = false
        errorText = '不包含@'
      }
      else {
        status = true
        errorText = ''
      }
      if (!this.userFlag) {
        errorText = ''
        this.userFlag = true
      }
      return {
        status,
        errorText
      }
    },
    passwordErrors () {
      let errorText, status
      if (!/^\w{1,6}$/g.test(this.passwordModel)) {
        status = false
        errorText = '密码不是1-6位'
      }
      else {
        status = true
        errorText = ''
      }
      if (!this.passwordFlag) {
        errorText = ''
        this.passwordFlag = true
      }
      return {
        status,
        errorText
      }
    }
  },
  methods: {
    onLogin () {
      if (!this.userErrors.status || !this.passwordErrors.status) {
        this.errorText = '部分选项未通过'
      }
      else {
        this.errorText = ''
        this.$http.get('api/login')
        .then((res) => {
          this.$emit('has-log', res.data)
        }, (error) => {
          console.log(error)
        })
      }
    }
  }
}
</script>

<!--scoped表示当前的样式只对这个组件有效 -->
<style scoped>

</style>

2.组件的使用

注：在父组件中注册子组件时（就是在父组件中的compoents注册）无论是采用驼峰命名还是首字母大写，但是在template都尽量使用中线间隔

动态组件：使用v-bind:is=”组件名”，动态修改组件

3.父子组件的通信

父组件向子组件传递数据，采用的是是props,
在父组件中：

在子组件中：

注：在子组件中定义属性的时候，是不支持驼峰的，所以要使用小写中线来链接，但是页面绑定
的时候要使用驼峰。如：
父组件中向子组件传递参数时：

<com-a :old-num="898"></com-a>

子组件中：

<span>{{oldNum}}</span>

子组件向父组件中传递信息有很多种方法，这里我使用的事件传递
首先，子组件向父组件传递事件和数据

父组件要定义好对应的处理函数

注意：事件名不能使用驼峰

4.全局组件（不常用）

5.组件中的插槽：slot

我们可以使用组件的插槽功能，使得组件内容更加丰富
子组件中：
如果父组件中没有数据要显示在插槽中，插槽中的“xxxx”就会显示到页面上

<template>
  <div >
    <slot>xxxx</slot>
  </div>
</template>

父组件：

<com-a>
<input type="text">
<span>请输入</sapn>
</com-a>

6.具名插槽

就是带有name属性的插槽

<template>
  <div >
    <slot name="header">我是头部</slot>
      <slot name="footer">我是底部</slot>
  </div>
</template>

父组件：

<com-a>
<input type="text" slot="header">
<input type="text" slot="footer">
</com-a>