Vue组件基础总结

Vue组件基础总结

最近刚学了一点Vue组件的内容，因为内容太多了，先在博客中记录一些，以后学了更多再更新。

我的学习教材是梁灏编著的《Vue.js实战》和官网的文档，之前还看了些表老师的视频。

在学了Vue以来，个人最大的感受就是Vue可以实现极大程度的模块化开发，而组件就是这些模块的核心。

组件的创建如下：

<script>
Vue.component('my-component', {                           
    //组件内容
})

var app = new Vue({
  el:'#app'
})
</script>

<div id="app">
  <my-component></my-component>
</div>

组件模板：

Vue.component('my-component',{
     //父组件要传递数据到子组件时需要用到props
  props:{
    //必须是数字（验证）
    propsA: Number,
    //必须是字符串或者数据类型
    propsB: [String, Number],
    //布尔值，如果没有定义，默认就是true
    propsC:{
        type: Boolean,
        default: true
    },
    //数字，而且是必传
    propsD:{
      type: Number,
      required: true
    },
    //如果是数组或者对象，默认值必须是一个函数来返回
    propsE:{
      type:Array,
      default:function(){
        return  value > 10;
      },
    //自定义一个验证函数
    props:{
      validator:function(value){
        return value > 10;
      }
    }
 },
 
 template:`  `,                               //template中的DOM元素必须要用<div></div>包含
 
 data:function(){          
   return
 },                                          //组件中的data要以函数的形式出现
 
 motheds:{
 }, 
 .
 .
 .
 
})

组件通信（子组件向父组件传递）

<div id="app">
<p>总数：{{total}}</p>
<my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>

<script>
Vue.component('my-component',{
  template:`
  <div>
     <button @click="handleIncrease">+1</button>
     <button @click="handleReduce">-1</button>
  </div>
  `,
  data:function(){
    return{
      counter:0
    }
  },
  methods:{
    handleIncrease:function(){
      this.counter++;
      this.$emit('increase', this.counter);
    },
    handleReduce:function(){
      this.counter--;
      this.$emit('reduce', this.counter);
    }
  }
})


var app = new Vue({
  el:'#app',
  data:{
    total:0
  },
  methods:{
    handleGetTotal:function(total ){
      this.total = total;
    }
}
});
</script>