组件的学习

组件定义

组件是可复用的vue实例，需要挂载到vue的实例：

组件与vue实例的区别在于vue实例有el选项组件没有el选项；

vue实例通过el指定挂载的位置，组件的html元素定义在template；

组件通过一个函数返回一个对象，vue实例是对象；

定义组件：

var compoent1 = {
  data: function() {
    return {
     count: 0
    }
  },
  template: '<button v-on:click="count++">点击了{{ count }} 次.</button>'
}

全局定义组件:

Vue.component('自定义组件名'组件对象)；

每个组件都是独立的互不影响，可重用，易维护；

<div id="app">
   <button-counter></button-counter>
</div>
<script>
  var compoent1 = {
    data: function() {
     return {
       count: 0
     }
    },
    template: '<button v-on:click="count++">点击了{{ count }} 次.</button>'
  }
  Vue.component("button-counter", compoent1);
  var vm = new Vue({
    el: "#app"
  });
</script>

组件命名

一般使用“-”隔开（例：aaa-bbb-ccc）

或使用帕斯卡命名（大驼峰）（例：Aaa-Bbb-Ccc）

局部注册

局部注册定义在components

局部注册的组件在子组件中不可用

属性名是自定义元素的名字，属性值就是这个组件的选项对象

new Vue({
 el: '#app'
 components: {
   'component-a': ComponentA,
   'component-b': ComponentB
 }
})

props数组

<div id="app">
   <course-item coursename="Web前端开发"></course-item>
</div>
<script>
  var courseListComponent = {
    props: ['coursename'],
    template: '<p>{{ coursename }}</p>'
  }
  var vm = new Vue({
    el: "#app",
    components: {
     'course-item': courseListComponent
    }
  });
</script>

props对象

// 对象语法，提供校验
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }

命名

命名最好全部采用小写或使用小驼峰命名法（小驼峰命名节点要使用“-”隔开）

自定义事件向父组件发送消息

语法：$emit（“事件名”，“事件传递的数据”）

    <div id="app">
     <stu-content @left-length="leftNumber=$event"></stu-content>
     <p>剩余字数{{leftNumber}}</p>
    </div>
    <script>
     var component1 = {
       data: function() {
         return {
          content: '',
          maxLength: 50,
         }
       },
       template: '<textarea v-model="content" ></textarea>',
       watch: {
         content: function(newValue, oldValue) {
          var len = newValue.length;
          var leftLength = this.maxLength - len;
          this.$emit("left-length", leftLength);
         }
       }
     }
     var vm = new Vue({
       el: "#app",
       data: {
         leftNumber: 50,
       },
       components: {
         'stu-content': component1
       }
     });
    </script>

v-model是@input="value=$event"操作的语法糖；

修改事件名为input，使用v-model接收事件处理结果

 <div id="app">
     <stu-content v-model="leftNumber"></stu-content>
     <p>剩余字数{{leftNumber}}</p>
    </div>
    <script>
      var component1 = {
       data: function() {
         return {
          content: '',
          maxLength: 50,
         }
       },
       template: '<textarea v-model="content" ></textarea>',
       watch: {
         content: function(newValue, oldValue) {
          var len = newValue.length;
          var leftLength = this.maxLength - len;
          this.$emit("input", leftLength);
         }
       }
     }
     var vm = new Vue({
       el: "#app",
       data: {
         leftNumber: 50,
       },
       components: {
         'stu-content': component1
       }
     });
    </script>