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元素必须要用
包含
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:` 
`
, 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>

你可能感兴趣的:(前端,Vue,组件)